Angularjs several basic concepts

Scope

The scope of the application is associated with the applied data model, and the scope is also the context in which the expression executes. $scope objects are places that define the application of business logic, controller methods, and view properties. The scope is the glue between the view and the scope. Before the app renders and renders the view to the user, the template in the view is connected to the scope, and then the app sets the DOM to notify the Angularjs of the property change.

Scopes are the basis of the application state. Based on dynamic binding, we can rely on the view to update $scope as soon as it modifies the data, or to rely on $scope to re-render the view as soon as it changes.

$rootScope is the closest object in Angularjs to the global scope. Attaching too much business logic to $rootscope is not a good idea, just like global pollution in JavaScript.

$scope object is a normal JavaScript object, and we can modify or add properties on it at will.

$scope Objects act as data models in Angularjs, but unlike traditional data models, $scope is not responsible for processing and manipulating data, it is just a bridge between view and HTML, which is the glue between views and controllers.

What scopes can do

Provide observers to monitor changes in the data model

can notify the entire application of changes to the data model, even components outside the system

can be nested to isolate business functions and data

The execution environment required to provide an operation to an expression

Scopes contain the functionality and data required to render a view, which is the only source of all views.

The life cycle of the $scope

When an event that angular cares about occurs in a browser, such as when a user enters in an input field that is monitored through the Ng-model property, or when a button with the Ng-click attribute is clicked, the event loop of angular is started, and the event is processed in the angular execution context.

There are four different stages of life cycle processing for $scope objects

Create

When a controller or instruction is created, ANGULARJS creates a new scope with $injector and passes the scope in when the controller or instruction that is created runs.

Link

When angular starts running, all $scope objects are attached or linked to the view. All functions that create $scope objects will have their own attachments to the view. These scopes register functions that need to be run when changes occur in the angular application context.

Update

When an event loop runs, it is typically performed on top-level $scope objects (called $rootscope), and each child scope performs its own dirty-value detection. Each monitoring function checks for changes. If any change is detected, the $scope object triggers the specified callback function.

Destroyed

When a $scope is no longer needed in the view, the scope cleans up and destroys itself.

More attention to graphs and routes

When applications become more complex or require more than one person to join the development effort, we need a reasonable way to manage the interface that users see during their use. It is a good choice to break the view into layouts and template views and display the corresponding view based on the URL that the user is currently visiting.

We will decompose these templates into the view and assemble them within the layout template. Angularjs allows us to implement this function by declaring a route in the provider $routeprovider of the $route service. With $routeprovider, you can take advantage of browser history navigation and let users create bookmarks or share pages based on the browser's current URL address.

Layout templates

To create a layout template, you need to modify the HTML to tell Angularjs where to render the template. By grouping Ng-view directives and routes together, we can precisely specify where the template for the current route is rendered in the DOM.

For example, we have a layout template that looks like this:

<div class= "Content" ><div ng-view></div></div>

<footer>

Here, we put everything we need to render in the <div class= "content" ></div>. Ng-view is a special instruction provided by the Ngroute template, equivalent to a placeholder.

The Ngview directive follows these rules:

The view is updated each time the $routechangesuccess event is triggered

If a template is associated with the current route, then:

To create a new scope

Removes the previous view, and the previous scope is also cleared

Associates a new scope with the current template

If there is an associated definition in the route, associate the corresponding controller with the current scope.

Triggering $viewContentLoaded events

If the OnLoad property is provided, the function specified by the property is called

Routing

Use the When and otherwise two methods to define the routing for the application, and use the Config function to define the route in a particular module or application.

We use the When method to add a specific route. This method can accept two parameters (when (Path,route)), the first parameter is the route path, this path will match the $location.path, $location. Path is the path to the current URL. If there are other things behind the path, we can store the parameters in the URL, and the arguments need to begin with a colon, which can be read with $routeparams.

The second parameter is the configuration object, which determines what to do when the route in the first parameter matches. The properties that can be set in the configuration object include controller, template, Templateurl, Resolve, Redirectto, and Reloadonsearch.

A complex routing scheme will contain multiple routes and a trap (otherwise) that can redirect all unexpected paths.

Controller: ' Mycontroller '

Controller:function ($scope) {}

If the Controller property is set in the configuration object, the specified director is associated with the new scope created by the route. If the parameter value is a character type, the corresponding content is found in all registered controllers in the module and then associated with the route. If the parameter value is a function type, this function is associated with the template as the controller of the DOM element in the template.

Template: ' <div>

Angularjs renders the HTML template in the configuration object to the corresponding DOM element with the Ng-view directive.

Templateurl: ' views/template_name.html '

The app reads the view (or reads from $templatecache) through XHR based on the path specified by the Templateurl property. If the template can be found and read, Angularjs renders the contents of the template into a DOM element with a ng-view instruction.

Resolve: {

' Data ': [' $http ', function ($http) {

Return $http. Get ("/api"). Then (

Function Success (RESP) {return response.data;}

Function error (reason) {return false;}

); }]; }

If the Resolve property is set, Angularjs injects elements from the list into the controller. If these dependencies are promise objects, they are resolve and set to a value before the controller is loaded and $routechangesuccess is triggered.

The list object can be:

Key, the key value is a dependent name that will be injected into the controller

A factory can be either a service name or a return value, which is a function that will be injected into the controller or promise object that can be resolve.

Redirectto: ' Home '

Redirectto:function (Route,path,search)

If the value of the Redirectto property is a string, then the path is replaced with this value and the route change is triggered based on the target path.

If the value of the Redirectto property is a function, then the path is replaced with the return value of the function, and the route change is triggered based on the target path. If the value of the Redirectto property is a function, Angularjs will pass in the following three arguments when it is called:

Route parameters extracted from the current path

Current path

Query string in the current URL

Reloadonsearch

If the Reloadonsearch option is set to True (the default), the route is reloaded when $location.search () changes. If set to False, the route is not reloaded when the query string portion of the URL changes. This tip is useful for requirements such as routing nesting and in-place paging.

$routeParams

As mentioned earlier, if we precede the route parameter with the following: Angularjs will parse it out and pass it on to $routeparams, for example, if we set up a route like this:

$routeProvider

. When ('/inbox/:name ', {controller: ' Inboxcontroller ', Templateurl: ' views/inbox.html '});

Angularjs adds a key named name to the $routeparams and its value is set to the value in the loaded URL. For example, the browser loads/inbox/all this URL, then the $routeparams object looks like this:

{name: ' All '}

If you need to access these variables in the controller, you need to inject the $routeparams into the controller

App.controller ("Inboxcontroller", Function ($scope, $routeParams) {//Visit $routeparams} here);

$location Services

ANGULARJS provides a service to parse the URL in the Address bar and gives you access to the route that corresponds to the current path of the app. It also provides the ability to modify paths and handle various forms of navigation. The service provides a more elegant encapsulation of the API for Window.location objects in JavaScript, and integrates with Angularjs.

When an application needs to jump internally, it is the best scenario for using the $location service, such as a jump after the user has registered, modified, or logged in.

Path ()

Replace () $location. Path ("/home"). replace ();

Absurl () Get the full URL after encoding

Hash ()

Host ()

Port ()

Protocol ()

Search () to get the query string in the URL

URL ()

Route mode

Different routing patterns are presented in a different URL format in the browser's address bar. $location service is routed by default using the label mode. If you need to explicitly set the route mode to label mode, you can do it in the Config () function,

Angular.module ("myApp", ["Ngroute"])

. config (["$locationProvider ', function ($locationProvider) {$locationProvider. Html5mode (false);}]);

If true, for HTML5 mode, the URL in the browser address bar looks like this: Http://yoursite.com/inbox/all

Angularjs several basic concepts