安裝angular

?npm install -g @angular/cli

?ng new myapp

?ng g component componentName

自帶路由

引入：angular-route.js

<div ng-controller='ctr1'><a href='#home'>首頁</a> <a href='#mine'>我的</a> <div ng-view></div>
<div>

?

angular.module('myapp',['ngRoute'])
.config(['$routerProvider','localProvider',function($routerProvider,$localProvider){$localProvider.hashPrefix('')$routerProvider.when(
'/home',{
templateUrl:'home.html',
controller:'ctr1'
}).when(
'/mine',{
templateUrl:'mine.html',
controller:function($scope){
$scope.name='little-rabbit'
},
}])
otherwise({redirectTo:'/home'}); })

UI.route路由

<div ng-controller='ctr1'><a ui-sref='#home'></a> <a ui-sref='#list'></a> <div ui-view></div>
<div>

?

angular.module('myapp',['ui.route','angularCSS']) .config(function($stateProvider,$urlRouterProvider){$urlRouterProvider.otherwise('home.html')$stateProvider.state('home',{url:'/home',templateUrl:'home/home.html',
css:'home/home.css'})
.state(
name:'list',
url:'/list',
templateUrl:'list/list.html',
css:'list/list.css'}) })

?

轉載于:https://www.cnblogs.com/wdxue/p/8341940.html

總結

以上是生活随笔為你收集整理的angular之两种路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。