What people are saying about Notes for Professionals books Super useful for reference, many thanks for whoever did this. This is really cool! Thanks a lot! This is gold. Great collection. Jump to packages. Stop wasting your time wrestling with incomplete and confusing tutorials Piecing together the docs is tough The documentation is not self-explanatory, one tutorial says one thing and another says something completely different. Googling only takes you so far There are not many good screencasts or tutorials out there that teach how to maximize the framework.
Some teach the basics, but nothing that shows how to fit everything together? Time is money; don't waste it sifting through blogs. Not only does it take a few trips around the community to have a basic understanding, but it's tough to find the answer you need.
The vocabulary is foreign, when are you supposed to use a directive, a filter, or a factory? How does it all fit together? The internals of AngularJS 1. How do you know how it all fits together? Still not hitting deadlines faster.
What if you could master the entire framework — with solid foundations — in less time without beating your head against a wall? Imagine how quickly you could work if you knew the best practices and the best tools? Stop wasting your time searching and have everything you need to be productive in one, well-organized place, with complete examples to get your project up without needing to resort to endless hours of research.
Get up and running quickly Within the first few minutes, you'll know enough Angular concepts to start writing your modern webapp. Comprehensive topics You'll learn core Angular concepts - from how Angular works under the hood to rich animations, from in-depth testing to real-world applications. Best practices Learn AngularJS best practices , such as testing, code organization, and how to structure your app for performance. Up to date The book is constantly updated with the latest tips and tricks of Angular.
What's in it? How to use AngularJS to your advantage How to build and use controllers and work with scopes How to build views, templates, and best practices You'll learn to master the core directives and build your own custom directives You'll learn how to implement real-world authentication How to test all parts of your applications You'll know exactly how Angular works, from bootstrapping to garbage collection.
You'll communicate with back-end services of your choosing. What the community says Too good to be true? It can take up to an hour to deliver the sample app. If you can see above pdf on click of Open PDF button then environment setup is done.
Now we can start with our resume builder application. Refer here for more details. Same as PDF, You can generate excel at client side. Refer Export to Excel in Angular blog for client-side excel generation in Angular. Now for an online resume builder, I have designed a resume form to get personal details, skills, experience details, education details, and other details. Here I have used the template-driven form and mapped it to resume object with it using two-way data binding.
Now to open pdf in a browser, download the pdf and print the pdf I have included three action buttons. One more action button I have added to reset form. We will write pdf design and configuration in the getDocumentDefinition method. By default, paragraphs are rendered as a vertical stack of elements one below another.
It is possible however to divide available space into columns. Second-line we will display with two columns as shown above, In the first column, we will display personal details, and in the second column, we will show a picture. For name , we have added styles in styles dictionary.
It is easy to add an image in pdf using PDFMake. We should only manipulate children of this element in the postLink function, since the children have already been linked.
These are passed as JavaScript objects. If there is no require option defined, then this controller argument is set as undefined. The controller is shared among all directives, which allows the directives to use the controllers as a communication channel public API.
If multiple requires are set, then this will be an array of controller instances, rather than just a single controller. The ngModel controller, which is injected along with ngModel when we use it in our directive, contains several methods.
Notice that this directive does not have an isolated scope. If we do set the directive to have the isolate scope, then the ngModel value will not update the outer ngModel value: Angular looks up this value outside of the local scope.
In order to set the view value of a scope, we must call the API function ngModel. We should apply this method only sparingly, as it can be disruptive to the Angular Way: angular. These are used to sanitize and modify the value.
We have described how the validation pipeline works, at a basic level. These functions do not need to return a value, as they are ignored. It will be true if there are no errors and false if there are. Angular Module Loading Angular modules, themselves, have the opportunity to configure themselves before the module actually bootstraps and starts to run.
We can apply different sets of logic during the bootstrap phase of the app. Configuration Angular executes blocks of configuration during the provider registration and configuration phases in the bootstrapping of the module.
This phase is the only part of the Angular flow that may be modified before the app starts up. For instance, when we create a factory or a directive on top of the module: angular. That is to say that we cannot inject a provider that has not yet been defined. The only exception to the rule of in-order definitions is the constant method. We always place these at the beginning of all configuration blocks. If we inject any old service into a.
The by-product of this strict requirement for configurable services is that we can only inject custom services that are built with the provider syntax and cannot inject other services. For more information on how to build with the provider syntax, head over to the services chapter.
We can also define multiple configuration blocks, which are executed in order and allow us to focus our configuration in the different phases of the app. Angular Module Loading angular.
Run Blocks Unlike the configuration blocks, run blocks are executed after the injector is created and are the first methods that are executed in any Angular app. Run blocks are the closest thing in Angular to the main method. The run block is code that is typically hard to unit test and is related to the general app. The only logical place to set this functionality is in the run method: angular. Multiple Views and Routing In a single-page app, navigating from one page view to another is crucial.
When apps grow more and more complex, we need a way to manage the screens that a user will see as they navigate their way through the app. We can already support such management by including template code in line in the main HTML, but not only will this in-line code grow large and unmanageable, it will also make it difficult to allow other developers to join in development. Rather than including multiple templates in the view which we could do with the ng-include directive , we can break out the view into a layout and template views and only show the view we want to show based upon the URL the user is currently accessing.
Installation As of version 1. In order to use routes in our Angular app, we need to install and reference it in our app.
We can download it from code. We can also install it using Bower, which will place it in our usual Bower directory.
For more information about Bower, see the Bower chapter. Using the ng-view directive in combination with the router, we can specify exactly where in the DOM we want to place the rendered template of the current route. It creates its own scope and nests the template inside of it. The ng-view directive is a terminal directive at a priority. Angular will not run any directives on the element at a lower priority, which is most directives i. To create a route on a specific module or app, we use the config function.
For more information on this syntax, check out the dependency injection chapter. Now, to add a specific route, we can use the when method. This method takes two parameters when path, route. This block shows how can create a single route: angular. Trailing or double slashes will still work. We can store parameters in the URL by starting off the name with a colon for instance, :name. The second parameter is the configuration object, which determines exactly what to do if the route in the first parameter is matched.
The configuration object properties that we can set are controller, template, templateURL, resolve, redirectTo, and reloadOnSearch. A more complex routing scenario requires multiple routes and a catch-all that redirects a route. Multiple Views and Routing angular. If we pass a string, it associates the registered controller on the module with the new route. If we pass a function, this function will be associated with the template as the controller for the DOM element.
The data key of the map above will be injected into our controller, so it can be retrieved in the controller. If the redirectTo property is set with a function, the result of the function will be set as the value of the new path, triggering a route-change request. This tip is useful for nested routing or in-place pagination, etc. Now we can set up our routes using the when function. If no route matches, then the otherwise method will be called. When the browser loads the Angular app, it will default to the URL set as the default route.
It also gives you the ability to change paths and deal with any sort of navigation. Doing so returns the location object. A hash object might contain an array of values as well. If the value is null, then the parameter will be removed.
The routing mode determines what the URL of your site will look like. In hashbang mode the fallback for html5 mode , URL paths take a prepended character. This prefix is part of the fallback mechanism that Angular uses for older browsers. We can also configure this character. To configure the hashPrefix: angular. In a modern browser, it will see the URL as it was intended.
The back-end server will have to support URL rewriting on the server side. To support HTML5 mode, the server will have to make sure to deliver the index. That ensures that our Angular app will handle the route. This functionality is useful particularly when you want to manipulate events based upon routes and is particularly useful for detecting when users are logged in and authenticated. We need to set up an event listener to listen for routing events.
This step is where the route services begin to resolve all of the dependencies necessary for the route change to happen and where templates and the resolve keys are resolved. Note About Indexing Web crawlers traditionally have a hard time with fat client-side JavaScript apps.
To support web crawlers that run through the app, we need to add a meta tag in the head. This meta tag causes the crawler to request links with an empty escaped fragment parameter so that the back end will serve back snippets of HTML.
Dependency Injection In general, there are only three ways an object can get a hold of its dependencies: 1. We can create it internally to the dependent. We can look it up or refer to it as a global variable. Dependency injection is a design pattern that allows for the removal of hard-coded dependencies, thus making it possible to remove or change them at run time.
This ability to modify dependencies at run time allows us to create isolated environments that are ideal for testing. We can replace real objects in production environments with mocked ones for testing environments. Functionally, the pattern injects depended-upon resources into the destination when needed by auto- matically looking up the dependency in advance and providing the destination for the dependency. As we write components dependent upon other objects or libraries, we will describe its dependencies.
At run time, an injector will create instances of the dependencies and pass them along to the dependent consumer. When any of our modules boot up at run time, the injector is responsible for actually instantiating the instance of the object and passing in any of its required dependencies. For instance, this simple app declares a single module and a single controller, like so: angular.
AngularJS uses an annotate function to pull properties off of the passed-in array during instantia- tion. Annotation by Inference Angular assumes that the function parameter names are the names of the dependencies, if not otherwise specified. The injection process looks like: injector. JavaScript minifiers generally change function arguments to the minimum number of characters along with changing white spaces, removing new lines and comments, etc. If we do not explicitly describe the arguments, Angular will not be able to infer the arguments and thus the required injectable.
Explicit Annotation Angular provides a method for us to explicitly define the dependencies that a function needs upon invocation. This method allows for minifiers to rename the function parameters and still be able to inject the proper services into the function.
This method of injection does work with minification, because the annotation information will be packaged with the function. Inline Annotation The last method of annotation that Angular provides out of the box is the inline annotation.
Additionally it affords us the ability to not use a temporary variable in the definition. Inline annotation allows us to pass an array of arguments instead of a function when defining an Angular object. The elements inside this array are the list of injectable dependencies as strings, the last argument being the function definition of the object. We often refer this method as the bracket or array notation [].
The annotate function is used by the injector to determine which services will be injected into the function at invocation time. The annotate method returns a single array of the names of services that will be injected into the function at the time of invocation.
Dependency Injection has The has method returns true if the injector knows that a service exists in its registry and false if it does not. It takes a constructor and invokes the new operator with all of the arguments specified. The instantiate method returns a new instance of Type.
The arguments for the function are set with the function annotation. The invoke method returns the value that the fn function returns. In production, however, it is often less convenient to explicitly concern ourselves with order of arguments and code bloat.
The ngMin tool allows us to alleviate the responsibility to define our dependencies explicitly. It walks through our Angular apps and sets up dependency injection for us. For instance, it will turn this code: angular. If we are using Rails, we can use the Ruby gem ngmin-rails. With the help of astral, an AST tooling framework, it rebuilds the source with the necessary annotations and then dumps the updated source using escodegen.
If our code uses syntax similar to the code used in this book, ngMin will be able to parse the source and pre-minify it. For memory and performance purposes, controllers are instantiated only when they are needed and discarded when they are not. That means that every time we switch a route or reload a view, the current controller gets cleaned up by Angular. Services provide a method for us to keep data around for the lifetime of the app and communicate across controllers in a consistent manner.
They provide an interface to keep together those methods that relate to a specific function. It will also be useful to make our own services for any decently complex application. AngularJS makes it very easy to create our own services: All we need to do is register the service. Once a service is registered, the Angular compiler can reference it and load it as a dependency for runtime use.
The name registry makes it easy to isolate application dependencies for mocks and stubbing in our tests. The most common and flexible way to create a service uses the angular.
This service factory function is responsible for generating a single object or function that becomes this service, which will exist for the lifetime of the app.
When our Angular app loads the service, the service will execute this function and hold on to the returned value as the singleton service object. To expose a method on our service, we can place it as an attribute on the service object. At run time, Angular will take care of instantiating it and resolving dependencies like normal. To inject the service in the controller, we pass the name as an argument to the controller function.
With the dependency listed in the controller, we can execute any of the methods we define on the service object. Services angular. Services Using services is also the canonical way to share data across several controllers. For instance, if our application requires authentication from a back-end service, we might want to create a SessionsService that handles user authentication and holds onto a token passed by the back-end service. When any part of our application wants to make an authenticated request, it can use the SessionsService to get the access token.
To share data across controllers, we need to add a method to our service that stores the username. Remember, the service is a singleton service that lives for the lifetime of the app, so we can store the username safely inside of it. In any controller in our application, we can inject the githubService and call events without concerning ourselves with whether or not we have the right username on our scope object. As with other Angular services, when we define our service, getFn can take an array or a function that will take other injectable objects.
The getFn function can return anything from a primitive value to a function to an object similar to the value function. The service function will instantiate the instance using the new keyword when creating the instance.
At the root of all the methods for creating a service is the provider method. The two method calls are functionally equivalent and will create the same service. The answer lies in whether we need the ability to externally configure a service returned by the. Unlike the other methods of service creation, we can inject a special attribute into the config method. The provider method registers a provider for a service.
The name will be used as the name of an instance of the service. For instance, if we define a service as githubService, then the provider will be available as githubServiceProvider. The provider function returns an object that is a registered provider instance. It is also important for us to know about the constant and value methods when creating services. We can store that constant value using constant. The constant method returns a registered service instance.
We can simply use the value function to register the service. The value method returns a registered service instance for the name given. Typically, a good rule of thumb is that we should use value to register a service object or function, while we should use constant for configuration data. Decorating our services enables us to extend services or replace them with something else entirely. Decorators, themselves, are very powerful in that we can not only provide decorations for our own services, but we can intercept, interrupt, and even replace functionality in the core Angular services.
Use-cases for decorating services might include extending a service to cache external data requests to localStorage or wrapping a service in debugging or tracing wrappers for development purposes.
Rather than modifying the original service, we can decorate it using a decorator function. The function is called with injector. Without a back end, we are limited to only showing information that we have at load time. Angular provides us several methods if we want to integrate our AngularJS app with information from a remote server.
The function returns a promise that has two helper methods: success and error. This observation is not accurate: The method actually returns a promise. Then receives optionally 2 functions as a parameter. Otherwise, we can use the success and error callbacks instead.
Otherwise, the error callback will be invoked. Note that if the response results in a redirect, the XMLHttpRequest will follow it, and the error callback will not be called. Note that we have the ability to use the then method or the success and error methods on the HttpPromise. The difference between using the then method and the convenience helpers is that the success and error functions contain a destructured representation of the response object, which the then method receives in whole.
That will force the digest loop to run, and our promises will resolve as we expect them to. The get method returns a HttpPromise object. The delete method returns a HttpPromise object.
The head method returns a HttpPromise object. The jsonp method returns a HttpPromise object. The post method returns a HttpPromise object. The put method returns a HttpPromise object. It can contain the following keys: method string This key is the HTTP method we use to make the request. If the value is not a string, it will be JSONified. If the return value of the function is null, the header will not be sent. We generally use it to serialize data before it is sent to the server.
We generally use it to deserialize data after it has received returned data. By default, CORS requests will not set any cookies. The withCredentials flag sets a custom header called Access-Control-Allow-Credentials, which makes the request with any cookies from the remote domain in the request.
For more information on working directly with Angular caching, check out the caching chapter. For more custom control of the cache that Angular uses, we can pass a custom cache instead of true in the request. The 21st most recent unique request will cause the Least Recently Used request to be removed from the cache. It gets a tad cumbersome to pass a custom cache every single time even in a service.
Communicating with the Outside World: XHR and Server-Side Communication Interceptors Anytime that we want to provide global functionality on all of our requests, such as authentication, error handling, etc. For instance, in authentication, if the server returns a response code with , we likely would want to kick the user out to a login page. Angular provides a way for us to handle responses at the global level using interceptors.
It can modify the config object or create a new one, and it is responsible for returning the updated config object or a promise that resolves a new config object. The function can modify the response or create a new one. To create an interceptor, we use the. This service creates a resource object that allows us to intelligently work with RESTful server-side data sources; it comes in handy when dealing with back ends that support the RESTful data model out of the box.
Representational state transfer, or REST for short, is a method of intelligently serving data from a back-end web service. Since the ngResource module is not built into Angular by default, we need to install it and reference it inside of our app. We can also install it using Bower, which places it in our usual Bower directory. For more information about Bower, see the bower chapter.
This resource class object itself contains methods that allow us to interact indirectly with our back- end services. By default, this object generates five methods that allow us to interact with a collection of resources or to generate an instance of a resource object. They can be named parameters in the URL, or they can be query parameters. Without specifying a named parameter, such as above, the get request is generally used to get a single resource. The save method is used to create a new resource on the server.
It is used to remove an instance from the server. These three methods can be called on the instances themselves. This data is an empty reference, not the actual data, as all these methods are executed asynchronously. Therefore, a call to get an instance might look synchronous, but is actually not. If the request is successful, the promise is resolved with the resource instance or collection object. If the request is unsuccessful, then the promise is resolved with the HTTP response object, without the resource property.
The value of the object, the action, is the name of the method on the resource object It can contain the following keys: method string method refers to the HTTP method we want to use to make the request. If any of the values are functions, they will be executed every time we need to fetch a parameter value for a request.
It is usually used for serialization. It is usually used for deserialization. By default, CORS requests do not set any cookies. This makes request send any cookies from the remote domain in the request. Building custom services gives us greater overall customization of our app and the ability to abstract the responsibility of communicating to remote services away from our controllers and views.
Additionally, it allows us to not worry about how we are getting data in our controllers. This disconnection from inside Angular objects also helps to make testing a breeze, as we can stub and mock back-end calls without worrying about actually making the calls to our back end during tests.
For instance: angular. The keys in the object match up with the named parameters. If we pass a key that is not set as a named parameter, then it is passed as a regular query parameter. To set a dynamic parameter, we only need to prefix the value with a ' ' character. Restangular takes a completely different approach to XHR and makes it a pleasant experience. Explicit The Restangular library includes little to no magic.
And there is much, much more. Installation Installing Restangular is easy — we have options. If we use bower, Lodash will automatically be downloaded for us. Once Restangular returns an initial object, we can use several different methods to interact with our back-end API. This getList method returns a collection containing methods we can call to work with the specific collection.
We can also add queryParameters and headers to this request. To send a delete request, we can call the remove method on an object inside the collection an element. Restangular supports this functionality out of the box with the method put. To update an object, we need to query the object, set our new attributes on the instance, and call put on the object to save the updated attributes in the back end.
Nested components are those that live underneath other components. For instance, for all of the books written by a certain author. Restangular supports nested resources by default. In fact, we can query a particular instance from our collection for their nested resources. For instance, we can first fetch an author to display in one part of our code, and then get the list of books from it: Restangular. Restangular supports, out of the box, all HTTP methods. To add custom query parameters, we need to add a JavaScript object as the second parameter to our method call.
We can also add a second JavaScript object as a third parameter. Most all of the individual methods that we can call on an element take these two parameters as optional parameters. There are a few different places where we can configure a Restangular service. We can configure it globally or using a custom service.
0コメント