ANGULARJS Study Notes

ANGULARJS Study Notes

Recently in the learning mean framework, where the front-end part of the ANGULARJS,ANGULARJS is different from the previous contact jquery, it is by adding directive (markup) to HTML to enhance the interactivity of the HTML, I think its double-ended binding is very good, and the ability to decouple the logic and interface is indeed a front-end framework worth learning.

1, the Controller

<div ng-controller= "Mycontroller" >

{{Person.name}}

</div>

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

$scope. person = {

Name: "Ari Lerner"

};

});

The person.name here corresponds to the text with shading.

Because $scope represents any child element in this mycontroller.

2. How to write services?

In general, in the public folder of the Web site, create a new services that can share data in controllers. It is a singleton and is instantiated only once.

Create a xxx.js in the Services folder, and then write out the code:

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

. Factory (' Githubservice ', function () {

var serviceinstance = {};

Our first service

return serviceinstance;

});

This is just an example, and it doesn't do anything.

It can be extended to GitHub's service, the yellow part below is new, you can see, here depends on the $http for local refresh:

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

. Factory (' Githubservice ', [' $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 do I add services to a controller?

App.controller (' ServiceController ', [' $scope ', ' Githubservice ',

function ($scope, githubservice) {

}]);

This method, fill in the public/controllers, so that we write Githubservice import in.

3, how to write routing

The role of routing is that we can successfully integrate the background template into a view to achieve modular loading.

Implemented through $routeprovider.

<div class= "Content" >

<div ng-view></div>

</div>

<footer>

</footer>

The ng-view instruction will tell $routeprovider where to render the template.

The following mainly sets the When function of $routeprovider and the otherwise function.

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

The second parameter is a configuration object that has different keys:

1) Controller; This controller can be a controller in a script, or it can be a function that is currently written, and its function parameter is the functions ($scope) {}

2) template; A string is accepted, and templates are rendered to Ng-view in the DOM.

Example: Template: ' <div>

3) Templateurl; same as template, just set the URL.

Example:

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

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

$routeProvider. When ('/', {

Controller: ' HomeController ',

Template: '

})

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

}]);

If you specify a route similar to:, you can access the $routeparams through the controller.

$routeProvider. When ('/person/:id ', {

Controller: ' Peoplecontroller ',

Template: ' <div>person Show page: {{name}}</div> '

})

In Peoplecontroller, we retrieve the ID of the people specified in the route:

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

We are now having access to the $routeParams

At the ROUTE/PERSON/42, Our$routeparams would look like:

{id:42}

Should be

$routeParams. person.id = 42;

});

4. Experience Talk

The actual use of the process, a page with a controller is appropriate. The initialization of the angular variable is not recommended for ng-init, but is done in the controller.

5. Lessons learned

When referencing the controller and service, it is also important to note that

var MyApp = angular.module (' myApp ', []);

Represents a angular module that defines MyApp, which is created by the name "MyApp" and the dependency []. and

var myApp = angular.module (' myApp ');

Represents the reference to the MyApp module, which differs from the above. If you try two places, call the

var MyApp = angular.module (' myApp ', []);

Then the console will have an error:

Error: $injector: UNPR

Unknown Provider

I've been haunted by this place for a long time.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

ANGULARJS Study Notes