AngularJS A comprehensive beginners guide to angular.js , 3nd Edition (Rufus Stewart) (Z-Library)

📄 File Format: PDF

💾 File Size: 6.1 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

Angular js A comprehensive beginner's guide to angular.js By Rufus Stewart 2nd edition 2021

📄 Page 3

"Programming isn't about what you know; it's about what you can figure out.” - Chris Pine

📄 Page 4

mEm lnc .com

📄 Page 5

All rights reserved202 1 Chapter I…………………………………………………………… Terminology…………………………………………………………. MVC……………………………………………………………………… Angular JS Project Preparation……………………………..

📄 Page 6

Controllers……………………………………………………………. Directives……………………………………………………………… Services………………………………………………………………… Factories……………………………………………………………….. Filters……………………………………………………………………. Two-way data link…………………………………………………. Declarative data link…………………………………………….. Declarative DOM functions……………………………………. Expressions……………………………………………………………. Routing and Dynamic Views…………………………………….. General fixed data………………………………………………….. Shrink files……………………………………………………………… Differences between MVC and MVVM…………………… HTML5 web components……………………………………….. Domain Comments (Scope)……………………………………. Is it difficult or easy?...................................................... Does it suit you?............................................................. Future standards………………………………………………………… Chapter II……………………………………………………………………….. …………… Installation…………………………………………………………………. Expressions Phrases……………………………………………………. Directives……………………………………………………………………. ng-bind……………………………………………………………………….. ng-

📄 Page 7

init…………………………………………………………………………. Scopes Domains………………………………………………………….. Two-way connectivity…………………………………………………. ng-model…………………………………………………………………….. summary……………………………………………………………………… Chapter III……………………………………………………………………………………….. ng-controller………………………………………………………………. Build the form……………………………………………………………. Controller as propertyName………………………………………. Dependency injection………………………………………………… MVC model-display-controller……………………………….…… Minions…………………………………………………………….... Callbacks…………………………………………………………….. summary……………………………………………………………. Chapter IV……………………………………………………… Initialization……………………………………………………….. First………………………………………………………………….. rootScope $............................................................ Insulation……………………………………………………………. Overlapping domains………………………………………….. Genetics…………………………………………………….………… scope. $ watch………………………………………….…………. scope. $ apply……………………………………………….……..

📄 Page 8

summary…………………………………………………….……….. Chapter v……………………………………………………. …..146 Initialization………………………………………………………….. Pass over items……………………………………………………… ng-repeat………………………………………………………………. Object elements……………………………………………………. Exclusivity……………………………………………………………… Strict equality………………………………………………………. track by……………………………………………………………….. Consequences of the callback………………………………. summary………………………………………………………………. Chapter VI…………………………………………………………………………….. Why do we use Angular units? ……………………………… Create an application unit……………………………………… Download the application unit ………………………………. Microcontroller definition……………………………………… Definitions series……………………………………………… …. Loading units…………………………………………………………. Conclusion……………………………………………………………… Chapter VII………………………………………………………………………….. Implicit dependencies……………………………………………..

📄 Page 9

Annotations……………………………………………………………. ng-annotate……………………………………………………………. angular.injector………………………………………………………. Risks ……………………………………………………………………….. Conclusion ……………………………………………………………… Memlnc.com Introduction Well, you’re in good hands!But we have a long road, you and me, with lots of things to learn :).We’re living exciting times in Web development. There is a new Angular. A complete rewrite of thegood old AngularJS. Why a

📄 Page 10

complete rewrite? Was AngularJS 1.x not enough?I like the old AngularJS very much. In our small company, we have built several projects with it,contributed code to the core framework, trained hundreds of developers (yes, really), and evenwritten a book about it (in French, but that still counts).AngularJS is incredibly productive once you have mastered it. Despite all of this, it doesn’t preventus from seeing its weaknesses. AngularJS is not perfect, with some very difficult concepts to grasp,and traps hard to avoid.Most of all, the Web has changed since AngularJS was conceived. JavaScript has changed. *** Newframeworks have emerged, with great ideas, or better implementation. We are not the kind ofdevelopers to tell you that you should use this tool instead of that one. We just happen to knowsome tools very well, and know what fits the project. AngularJS was one of those tools, allowing usto build well-tested web applications, and to build them fast. We also tried to bend it where it didn’tfit. Don’t blame us, it happens to the best of us.Will Angular be the tool we will use without hesitation in our future projects? It’s hard to say rightnow, because the framework is really young and the ecosystem only just blooming.But Angular has a lot of interesting points, and a vision that few other frameworks have. It has beendesigned for the Web of tomorrow, with ECMAScript 6, Web Components and Mobile in mind.When it was first announced, I was, like many, sad at first that the 2.0 version would not be asimple update (I’m sorry if you’re just learning about it). *** But I was also eager to see what solution the talented Google team would come up with.So I started to write this ebook, pretty much after the first commits, reading the design docs,watching the conference videos, reviewing every commit since the beginning. When I wrote myfirst ebook, about AngularJS 1.x, it was already a stable and known beast. This one is very different,it started when Angular was not even clear in the minds of its designers. Because I knew I wouldlearn a lot, not only about

📄 Page 11

Angular but also about the concepts that would shape the future of Webdevelopment, some of which have nothing to do with Angular. And I did. I had to dig a lot aboutsome of these concepts, and I hope that you will enjoy the journey of learning about them, and howthey relate to Angular, as much as I did. The ambition of this ebook is to evolve with Angular. If it turns out that Angular is the greatframework we hope, you will receive updates with the best practices and some new features asthey emerge (and with fewer typos, because, despite our countless reviews, there are probablysome left...). And I would love to hear back from you - if some chapters aren’t clear enough, if youspot a mistake or if you have a better way for some parts.I’m fairly confident about the code samples, though, as they are all in a real project, with several hundred unit tests. It was the only way to write an ebook with a newborn framework, and to beable to catch all the problems that inevitably arose with each release.Even if you are not convinced by Angular in the end, I’m pretty sure you will have learnt a thing ortwo along your read. ---------------------------------------------------------------------

📄 Page 12

(This page has no text content)

📄 Page 13

Chapter one general concepts (You can skip this chapter);

📄 Page 14

Terminology You don't have to go to great lengths to learn Angular, the most important thing to know is meanings of terms and MVC style, and MVC is short for Model-View-Controller, i.e. model-view-controller. Below are some of the basic terms and software interfaces that Angular provides us with.

📄 Page 15

MVC You may have heard of this acronym before, and it is used in many programming languages as a way to build the architecture of applications or programs. Here is a quick summary of its meaning: Model: The data structure underlying the application parts, often represented in JSON format. It is best to have a prior knowledge of JSON before learning Angular, as it is necessary for communication between the server and the presentation (we will explain it in the next point). For example, suppose we have a group of users, their metadata can be represented as follows: { "users": [{ "name": "Ahmed", "id": "82047392" }, { name: Samer, "id": "65198013" }] } This information is usually fetched from a server with an XMLHttpRequest request, and is matched in the jQuery procedure $ .ajax, and in the Angular object $ http. This information may be written in the script while interpreting the page (from a database or data store). Then you can edit this information and resend it. View: It is easy to explain, it is simply the final output or an HTML page that displays data (the form) to the user, for example. Using the MVC framework, data is retrieved from the template and appropriate information is displayed on the HTML page.

📄 Page 16

- The controller has a share, and he has control over things, but what? data. Controllers are the way you access the server and the view, allowing you to quickly update data by communicating with both the server and the client.

📄 Page 17

Angular JS Project Preparation The basics of our project must first be developed. We should start with the application (ng-app) that defines the application (and ng is a prefix meaning Angular and usually precedes all components of Angular JS), then a controller to communicate with the view, then link the DOM and do not forget to include Angular of course. Here are the basics: HTML text with ng- * declarations: <div ng-app = "myApp"> <div ng-controller = "MainCtrl"> <! - Contents of the controller -> </div> </div> Angular unit with microcontroller: var myApp = angular.module ('myApp', []); myApp.controller ('MainCtrl', ['$ scope', function ($ scope) { // Controller orders }]); Before getting ahead of us, we need to create an Angular Module (or Angular Module), which will include all of the script related to the project. There is more than one way to declare units, one of which is to chain all of the script together (I don't prefer this method):

📄 Page 18

angular.module ('myApp', []) .controller ('MainCtrl', ['$ scope', function ($ scope) {...}]) .controller ('NavCtrl', ['$ scope', function ($ scope) {...}]) .controller ('UserCtrl', ['$ scope', function ($ scope) {...}]); But the method that I prefer, which has proven to be the best for all the Angular projects I have designed is to define the general unit separately. The statement-dependent method may make you forget to close some of the brackets and make reading and correcting the script more complicated. So I prefer this method: var myApp = angular.module ('myApp', []); myApp.controller ('MainCtrl', ['$ scope', function ($ scope) {...}]); myApp.controller ('NavCtrl', ['$ scope', function ($ scope) {...}]); myApp.controller ('UserCtrl', ['$ scope', function ($ scope) {...}]); This way the script is divided into several files, and in each file I associate a component with the myApp namespace and it automatically becomes part of my app. Yes, as I understand it, I prefer to create a separate file for each directive controller, factory and anything else (thank you for this). Later you can combine them and shrink them to a single file (using Task Manager like Grunt or Gulp) and push it to the DOM.

📄 Page 19

Controllers You now know the MVC concept and learned how to set up a new project, so let's see how Angular JS applies the controls. Building on the previous example, we can now take a simple step towards displaying some data within the view using controlled users. Angular uses "handlebars" for HTML formatting. This simply means that controls can display data on an HTML page by replacing each term in it with double brackets like this: {{data}} A value set by the controller. Ideally, the HTML page should not contain real text or pre-inserted values, and this task should be left to Angular controls. Here is an example showing how a simple String text or string can be displayed on a page: <div ng-app = "myApp"> <div ng-controller = "MainCtrl"> {{text}} </div> </div> In a JavaScript file: var myApp = angular.module ('myApp', []); myApp.controller ('MainCtrl', ['$ scope', function ($ scope) { $ scope.text = 'Welcome to Angular Fans!'; }]); The most important concept here is the $ scope concept, which you will link to all functions within a specific controller. $ Scope refers to the current

📄 Page 20

element or region in the DOM (it does not equal this within the script) and thus creates a range that surrounds all data and functions within the DOM elements, and isolates it from other elements, so it appears to be transferring public / private JavaScript fields to the DOM, and this Nice. The domain concept may sound scary at first sight, but it's your way to connect the server (or even local data) on one side and the DOM on the other. This example gives you an idea of how data is "pushed" into the DOM. Let's take a look at real data, assuming we retrieved it from a server to display user login details. At this point, we will just use ready data, and we will learn how to retrieve it from the server as JSON later. First we'll write the JavaScript code: var myApp = angular.module ('myApp', []); myApp.controller ('UserCtrl', ['$ scope', function ($ scope) { // Let's make the user information a sub-item $ scope.user = {}; $ scope.user.details = { "username": "Todd Motto", "id": "89101112" }; }]); Then we go to the DOM to view this data <div ng-app = "myApp"> <div ng-controller = "UserCtrl">