AngularJS views and routes

Source: Internet
Author: User

referencing the Angular-route route after Angularjs  ngroute Module Load DeclarationAngularjs provides when and otherwise two ways to define the routing of an appthe otherwise method is tuned when there is no route match
We use it to set a default jump to the '/' path of the route Ng-view is the ultimate command with a priority of 1000. Angularjs does not run on the same element
low-priority Directiveseach time the $routechangesuccess event is triggered, the view is updated. If a template is associated with the current route:
Create a new scope;
Removes the previous view, and the previous scope is also cleared;
Associates the new scope with the current template;
If there are related definitions in the route, then the corresponding controller is associated with the current scope;
Triggering $viewcontentloaded events;
If the OnLoad property is provided, the function specified by the property is called.

The scope is the "glue" between the controller and the view.

1. Controllercontroller: ' Mycontroller '//orcontroller:function ($scope) {}if the Controller property is set in the Configuration object, then the specified director will be associated with the new role created by the routethe domain is associated with it. If the parameter value is a character type, the corresponding content is found in all the registered controllers in the module, and thenassociated with a route. If the parameter value is a function type, this function acts as the controller of the DOM element in the template and with the templateto associate.  2. TemplateTemplate: ' <div>Angularjs renders the HTML template in the configuration object to the corresponding DOM element with the Ng-view directive.  3. Templateurltemplateurl: ' views/template_name.html 'The app reads the view through XHR based on the path specified by the Templateurl property (or read from $templatecache). If the template can be found and read, Angularjs renders the contents of the template to the DOM with the ng-view instructionelement.  4. ResolveResolve: {' 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 arepromise objects, which are resolve and set to a $routechangesuccess before the controller is loaded and triggereda value. the list object can be:key, the key value is a dependent name that will be injected into the controller;The factory, which can be a service name or a return value, is a letter that will be injected into the controllernumber or Promise object that can be resolve. in the example above, resolve sends a $HTTP request and replaces the value of data with the value of the returned result. Columnthe key data in the table is injected into the controller, so it can be used in the controller.  5. Redirecttoredirectto: ' Home '//orredirectto:function (Route,path,search)if the value of the Redirectto property is a string, then the path is replaced with this value, and according to the target pathpath to trigger routing changes. if the value of the Redirectto property is a function, then the path is replaced with the return value of the function and   route changes are triggered by the marked path. if the value of the Redirectto property is a function, Angularjs will pass in the following three arguments when it is called:(1) The route parameters extracted from the current path;(2) current path;(3) The query string in the current URL. 6. ReloadonsearchIf the Reloadonsearch option is set to True (the default), when $location.search () changes, it is re -loads the route. If set to False, the route is not reloaded when the query string portion of the URL changes. Ittips The requirements for routing nesting and in-place paging are useful. It is now introduced to use the When function to set the route. The following example sets up two routes: one home route and one inbox route, and the home route is set Chengmerouting is not recognized. angular.module (' MyApp ', []).config ([' $routeProvider ', function ($routeProvider) {$routeProvider. When ('/', {controller: ' HomeController ',templateurl: ' views/home.html ' }). When ('/inbox/:name ', {controller: ' Inboxcontroller ',templateurl: ' views/inbox.html ' }). Otherwise ({redirectto: '/'}); }]);as above, we have set up two routes using the When method. The otherwise method is tuned when there is no route match, we use it to set a default jump to the '/' path of the route. When the browser loads the Angularjs app, the URL is set to the path that the default route points to. Unless we're browsing .different URLs are loaded in the device, otherwise it will be used/routed by default.    The so-called view refers to what the user sees. The life cycle of a view is started as a template, which merges with the model and ultimately
Render to the DOM in the browser. Unlike other templating systems, ANGULARJS uses a unique form to render a view
 The view template is written in HTML. The HTML is the declaration Yes, the declarative language is appropriate for writing the UI. The view should not contain any rows
For.
Because the controller and view do not have a direct call relationship, you can make multiple views correspond to the same controller. This is important for "skinning", adapting to different devices (such as mobile devices and desktops), and testing.
 A model is a data that is used to create a view with a template. The model must be referenced when it is in scope to be rendered
Build the view. Unlike other frameworks, Angularjs does not have any limitations or requirements on the model itself. You don't have to inherit any class
There is no need to implement the specified method for invoking or changing the model. The model can be a native object hash, or it can be a full
of the object type. In short, a model can be a native JavaScript object.
  $location  Path () to get the current path of the page
$location. Path (); Returns the current path $location. Path (' target ');//' Target ' modified to route or address the path () method interacts directly with the HTML5 history API

replace ()
If you do not want to click the Back button after jumping, ANGULARJS provides the replace () method to implement this function
BTW: (for jumping after a login this happens after a jump after a jump is useful) $location. Path ('/xxx ');
$location. replace (); $location. Path ('/xxx '). replace ();  Absurl () to get the full URL after encoding $location. Absurl () the hash () method is used to get the hash fragment in the URL:
$location. hash (); Returns the current hash fragment


The host () method is used to get the hosts in the URL:
$location. Host ();//hosts of the current URL

The port () method is used to get the port number in the URL:
$location. Port ();//ports of the current URL

The protocol () method is used to obtain the protocol in the URL:
$location. Protocol ();//protocol for current URL

The search () method is used to get the query string in the URL:
$location. Search ();
We can change the query string part of the URL by passing in the new query parameter to this method:
Set up queries with objects
$location. Search ({name: ' Ari ', username: ' Auser '});
Set up a query with a string
$location. Search (' Name=ari&username=auser ');
The search method can accept two parameters
Search (optional, string or object)
This parameter represents the new query parameter. The value of a hash object can be an array.
Paramvalue (optional, string)
If the type of the search parameter is a string, then Paramvalue will overwrite the URL with the value of the parameter.
Value. If the value of paramvalue is null, the corresponding parameter is removed.

The URL () method is used to get the URL of the current page:
$location. URL (); The string for the URL
If a parameter is passed when the URL () method is called, the current URL is set and modified, which modifies the path in the URL,
Query string and hash, and return $location.
Set a new URL
$location. URL ('/home?name=ari#hashthing ');
The URL () method can accept two parameters.
? URL (optional, string)
The base prefix of the new URL.
Replace (optional, string)
The path that you want to modify. $locationChangeStartWhen angular from $location service (via $location.path (), $location. Search (), etc.) to the browser
When the address is updated, the $locationchangestart event is triggered.
$locationChangeSuccesswhen and only if the address of the browser is successfully changed and there is no blocking $locationChangeStart event,
$locationChangeSuccess events are broadcast from $rootscope.

 

Data collation, declaring the above source and network

AngularJS views and routes

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.