Home > Developer > Web Develop
I did not know Angularjs this year July, but also is a new one, so here to talk about my personal findings.
July when class learned Angularjs, feel this is a magic JS frame, when beginners feel the biggest highlight is real-time update data. It is interesting to have the value of an expression with the same name in the view synchronized with the Ng-model input box at random. This does not even need to add <script> tags on the page to write their own JS code can be achieved. For Angularjs, the most basic use is to add Ng-app and Ng-model to the outer layer.
Later, also know that Angularjs is an MVC framework, ANGULARJS application with the controller is complete, so complete the whole land written on the Ng-app, and Ng-controller, but also cleverly wrote the name. This is a very simple example, the syntax is very simple, even without writing JS code, there is nothing wrong with the feeling.
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>Angularjs Practice</title> <Scripttype= "Text/javascript"src= "Js/angular.min.js" ></Script> </Head> <Body> <DivNg-app= "MYAPP"Ng-controller= "Myctrl">Name:<inputNg-model= "Name" /> <P>{{Name}}</P> </Div> </Body></HTML>
The result is an error:[Web browser] "Uncaught object"/angularjs exercise/js/angular.min.js ($)
The error place is still the code of the ANGULARJS framework! I was freaking out! Baidu has a bunch, in the bar on the help can not find the answer. The only thing that's kind of inspiring is that when someone says that jquery has encountered a similar situation, it has to be initialized , so I added the following in <body>:
< Script > var app = angular.module ("myApp", []); // initializing the ANGULARJS application </ Script >The result is still wrong, and the most let small white trouble is completely do not know where the wrong:
angular.min.js:107 Error: [Ng:areq] Http://errors.angularjs.org/1.4.6/ng/areq?p0=myCtrl&p1=not%20a%20function %2c%20got%20undefined
At Angular.min.js:6 ...
No information was found at all. Then I started a series of blind exploration, a variety of changes to view the effect, probably got one hours, later than the teacher's code, found that the teacher in the beginning and no Ng-controller, remove Ng-controller after the error, but also show normal.
summarized as follows: with the use of ANGULARJS, it is necessary to add the Ng-app property in the desired range, it can have no name, or the name is an empty string, if there is a use to the controller, filter, service, etc. must be added JS code, Ng-app to have value, And in the JS code initialization (naming and initialization must be "co-existence"), as well as Ng-controller, in the simple to not need a controller, do not need the simple application of JS code, do not need to "well-behaved" to write it, write it to be negative "initialization" responsibility.
I do not know if there will be beginners here confused, I was in trouble when I really did not see the explanation, I hope to give beginners a little help. Sometimes, the teacher will inadvertently appear this kind of hand mistake, look at the grammar no problem ah, the most bizarre problem is just in the seemingly simplest details.
The following is a recent similar finding:
Recently learned the Angularjs route, so I followed the teacher knocked with the $routeprovider about the code, the teacher said $ Routeprovider. When represents the case of various paths, and finally, the. otherwise indicates that the path is current and does not have a routing configuration object set. At first glance this writes, has when, also has the otherwise, very complete very professional Ah!
<Script> //when initializing the app, introduce Ngroute as a dependency varapp=Angular.module ("myApp",['Ngroute']); //Routing ConfigurationApp. Config (['$routeProvider',function($routeProvider) {//reference $routeprovider is to use its when method, when method has multiple, the last one is otherwise$routeProvider. When ("/",{"Template":"here is the list"}). When ("/add",{"Templateurl":"02_add.html"}). When ("/edit",{"Templateurl":"02_edit.html"}). otherwise (); }])//Set End </Script>
But it's an error! Particularly bizarre, the error message displayed is:
angular.min.js:sourcemap:40 uncaught Error: [$injector: Modulerr] http://errors.angularjs.org/1.5.8/$injector/ Modulerr?...... (omit n lines here) at this time I can only barely recognize the words "injection error". But where did you inject the error? I don't know. In class, the teacher also appeared this error, check a lap, look no problem ah, all kinds of debugging did not, finally had to copy the code before successful, bypassing this embarrassment. So I was the same way, the original code copied back later, and still think it is to use otherwise () to calculate the complete, the hands of the cheap and in the last when the back up. otherwise (); and the same mistake came up again ...
Wait a minute, the code of success just seems to be without otherwise ()! Because there was no way to consider the situation of the wrong path! Sure enough, the otherwise () here will be all right after it is removed! Then add in the otherwise what it should do: Redirect to somewhere when the path is wrong, i.e. . Otherwise ({redirectto: "/"}); will no longer error, the routing function is normal, the path is wrong when there will be redirects. originally here the otherwise () and the previous Ng-controller, but also "either complete the whole place, or completely default", can only "complete" or "default" to appear, I think this may be angularjs this frame "temper" bar, I think this kind of "temper" should also be more than Angularjs.
This is the first time to share the findings of your study here. Because usually encounter trouble will always Baidu to other people's blog, from other people's blog to solve their own problems. Only these problems really are all kinds of can not find a way to finally try out their own, then share it, do not know if there is a new and there is such a disturbance.
Angularjs "full" and "Default"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
