AngularJS learning notes, angularjs

AngularJS learning notes, angularjs
AngularJS Study Notes

Recently I have been studying the MEAN framework. The front-end part is AngularJS. AngularJS is different from jQuery that I used to work with. It adds direve ve (TAG) to html) to enhance the interaction capability of html, I think its double-end binding is great, and it can decouple the logic and interface. It is indeed a learning front-end framework.

1. About Controller

<Div ng-controller = "MyController">

{Person. name }}

</Div>

 

App. controller ('mycontroller', function ($ scope ){

$ Scope. person = {

Name: "Ari Lerner"

};

});

 

Here, the person. name corresponds to the text with shading.

Because $ scope represents any child element in this MyController.

 

2. How to Write services?

Generally, in the public folder of a website, a new service is created to share data in Controllers. It is a singleton and is instantiated only once.

Create XXX. js in the services folder and write the code:

Angular. module ('myapp. service', [])

. Factory ('githubusservice', function (){

Var serviceInstance = {};

// Our first service

Return serviceInstance;

});

 

This is just an example. It does not do anything.

 

You can extend it to the github service. The yellow section below is newly added. We can see that the $ http dependency is used for partial Refresh:

Angular. module ('myapp. service', [])

. Factory ('githubusservice', ['$ http', function ($ http ){

Var doRequest = function (username, path ){

Return $ http ({

Method: 'jsonp ',

Url: 'https: // api.github.com/users/' + username + '/' + path + '? Callback = JSON_CALLBACK'

});

}

Return {

Events: function (username) {returndoRequest (username, 'events ');},

};

}]);

 

How to add Services to the Controller?

App. controller ('servicecontroller', ['$ scope', 'githubservice ',

Function ($ scope, githubService ){

}]);

This method is entered in public/controllers to import the githubService we wrote.

 

3. How to Write Routing

The role of routing is that we can smoothly integrate the background Template into a View to achieve modular loading.

Implemented through $ routeProvider.

<Header>

<H1> Header

</Header>

<Div class = "content">

<Div ng-view> </div>

</Div>

<Footer>

<H5> Footer

</Footer>

 

The ng-view Command tells $ routeProvider where to render the template.

 

The following describes how to set the $ routeProvider's when function and otherwise function.

The first parameter of the when function is to set the path, which can be/or $ location. path ();

The second parameter is the configuration object, which contains different keys:

1) controller; this controller can be a controller in the script or a function currently written. Its function parameter is function ($ scope ){}

2) template; the string is accepted, and the template will be rendered to ng-view in the DOM.

Example: template: '<div>

3) templateUrl; similar to template, only the Url is set.

 

Example:

Angular. module ('myapp', []).

Config (['$ routeProvider', function ($ routeProvider ){

$ RouteProvider. when ('/',{

Controller: 'homecontroller ',

Template: '

})

. Otherwise ({redirectTo :'/'});

}]);

 

If a route similar to: is specified, you can use the Controller to access $ routeParams.

$ RouteProvider. when ('/person/: id ',{

Controller: 'eaglecontroller ',

Template: '<div> Person show page :{{ name }}</div>'

})

 

In eaglecontroller, we retrieve the: id of the people specified in the route

App. controller ('peoplecontroller', function ($ scope, $ routeParams ){

// We now have access to the $ routeParams

// At the route/person/42, our $ routeParams will look like:

// {Id: 42}

// It should be

$ RouteParams. person. id = 42;

});

 

4. Experience

In actual use, it is recommended to use a Controller as a page. In addition, initialization of Angular variables is not recommended in ng-init, but in controller.

 

5. Lessons learned

When referencing Controller and Service, note that

Var myApp = angular. module ('myapp', []);

It refers to the definition of myApp, that is, an Angular module created by the name "myApp" and dependency. While

Var myApp = angular. module ('myapp ');

It indicates that the module myApp is referenced, which is different from the above. If you try to call both of them

Var myApp = angular. module ('myapp', []);

Then an error will be reported on the console:

Error: $ injector: unpr

Unknown Provider

I have been suffering for a long time in this place.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.