Home > Developer > Web Develop
Beginner Angularjs Some days, find Angularjs to the last time will be difficult. It is not easy to adapt to the beginning, to the middle part, or relatively simple, to the end of the time found particularly difficult. I saw the website on the ANGULARJS, the learning route is rather strange, some strange. I wonder if that's right. Today, when I was learning Angularjs routing knowledge points, I encountered some problems, that is, the route is not. Here is the code you just started writing.
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<TITLE>ANGULARJS Routing Applications </title>6<script src= "Js/angular.min.js" ></script>Ten<script src= "Http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js" > One</script> A<script type= "Text/javascript" > - varApp=angular.module (' Routedemoapp ', [' Ngroute ']); -App. Config ([' $routeProvider ',function($routeProvider) { the $routeProvider -. When ('/', {Template: ' This is index! '}) -. When ('/tianmao ', {Template: ' This is Tmall '}) -. When ('/taobao ', {Template: ' This is Taobao '}) +. Otherwise ({redirectto: '/'}); - }]); +</script> A<!--$routeProvider used to define routing rules-- at -<body ng-app= "Routedemoapp" > -<H1>ANGULARJS Routing Applications -<ul> -<li><a href= "#/" >Index</a></li> -<li><a href= "#/tianmao" >Tmall</a></li> in<li><a href= "#/taobao" >Taobao</a></li> -<li><a href= "#/blabla" > Other </a></li> to</ul> +<div ng-view></div> $</body>Panax Notoginseng The use of Angularjs is version 1.6.1, and I use the 1.4 version on a rookie learning site.
Just at the beginning, I thought it was a problem with the code, and after a closer look, there was nothing wrong with the script or HTML. After the elimination of the law, it is found that there is a problem angularjs. If the code is not correct, the background will at least make a mistake, but the backstage also did not indicate what error. It's weird, eh sass. At the time, I thought it would be a version of the problem if it was not slowly ruled out. As to why the issue of the version, I think it is necessary to get a deeper understanding of the. However, Baidu did not find anything more valuable clues.
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<TITLE>ANGULARJS Routing Applications </title>6<!--<script src= "Http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js" ></script>-- >7<script src= "Http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js" >8</script>9<script type= "Text/javascript" >Ten varApp=angular.module (' Routedemoapp ', [' Ngroute ']); OneApp. Config ([' $routeProvider ',function($routeProvider) { A $routeProvider -. When ('/', {Template: ' This is index! '}) -. When ('/tianmao ', {Template: ' This is Tmall '}) the. When ('/taobao ', {Template: ' This is Taobao '}) -. Otherwise ({redirectto: '/'}); - }]); -</script> +<!--$routeProvider used to define routing rules-- - +<body ng-app= "Routedemoapp" > A<H1>ANGULARJS Routing Applications at<ul> -<li><a href= "#/" >Index</a></li> -<li><a href= "#/tianmao" >Tmall</a></li> -<li><a href= "#/taobao" >Taobao</a></li> -<li><a href= "#/blabla" > Other </a></li> -</ul> in<div ng-view></div> -</body> toExplain some code:
1 var app=angular.module (' Routedemoapp ', [' Ngroute ']);
First, define an application that uses a routing model, so at the time of definition, ' ngroute '. This model is routed, or can be defined directly in the body. But the definition is more convenient, according to my recent study, the last time I learned Angularjs animation, there is also an animated model.
The config function of the AngularJS module is then used to configure the routing rules. By using CONFIGAPI, we request that the $routeprovider be injected into our configuration function and use $ROUTEPROVIDER.WHENAPI to define the routing rules.
$routeProvider give us the When (Path,object) & Otherwise (object) function defines all routes in order, the function contains two parameters:
<div ng-view></div> will display the contents of the route.
There are a lot of other parameters in the routing rules, but I found it very complicated when I was learning the second example. may be to be cultivated!
Time is limited, next time Add.
Angularjs About routing problems
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
