#学习笔记#(56)angular ui-router使用姿势

来源：互联网发布：centos ntp 时间同步编辑：程序博客网时间：2024/05/01 21:16

一、单个ui-view

<!DOCTYPE html><html ng-app="myApp">    <head>        <meta charset="UTF-8">        <title></title>        <script src="js/jquery/jquery-2.1.1.min.js"></script>        <script src="js/angular/angular.min.js"></script>        <script src="js/ui-router/angular-ui-router.min.js"></script></head><body><div ui-view></div><script>    var myApp = angular.module('myApp', ['ui.router']);    myApp.config(function($stateProvider) {        $stateProvider.state('test', {            url: "",             template: "<h1>这是一个路由</h1>"        });});</script></body></html>

1 引入angular-ui-router.js

<script src="js/ui-router/angular-ui-router.min.js"></script>

2 注入模块

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

3 配置路由

myApp.config(function($stateProvider) {
$stateProvider.state('test', {
url: "",
template: "<h1>这是一个路由</h1>"

});

注意：1 必须写url: "",可为空，但必须写，不然就看不到视图内容

2 加上“/”可以通过ui-sref="test"访问到，不加表示初始默认显示，但不能通过ui-sref访问

3 .state('test', {}）；.state的第一个参数必须写，不写会报错（一般写index），当通过ui-sref访问时，这个参数会显示在浏览器url地址栏里

二、多个ui-view

<!DOCTYPE html><html ng-app="myApp">    <head>        <meta charset="UTF-8">        <title></title>        <script src="js/jquery/jquery-2.1.1.min.js"></script>        <script src="js/angular/angular.min.js"></script>        <script src="js/ui-router/angular-ui-router.min.js"></script></head><body><div ui-view="viewA"></div><div ui-view="viewB"></div><!-- Also a way to navigate --><a ui-sref="route1">路由1</a><a ui-sref="route2">路由2</a><script>    var myApp = angular.module('myApp', ['ui.router']);    myApp.config(function($stateProvider) {        $stateProvider                .state('test', {                    url: "",                    views: {                        "viewA": { template: "<h1>这是视图A</h1>" },                        "viewB": { template: "<h1>这是视图B</h1>" }                    }                })                .state('route1', {                    url: "/route1",                    views: {                        "viewA": { template: "<h1>路由1.视图A</h1>" },                        "viewB": { template: "<h1>路由1.视图B</h1>" }                    }                })                .state('route2', {                    url: "/route2",                    views: {                        "viewA": { template: "<h1>路由2.视图A</h1>" },                        "viewB": { template: "<h1>路由2.视图B</h1>" }                    }                })    });</script></body></html>

显示结果：

三、通过templateUrl属性配置视图

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title></title>    <script src="js/jquery/jquery-2.1.1.min.js"></script>    <script src="js/angular/angular.min.js"></script>    <script src="js/ui-router/angular-ui-router.min.js"></script></head><body><div ui-view></div><script>    var myApp = angular.module('myApp', ['ui.router']);    myApp.config(function ($stateProvider) {        $stateProvider                .state('test', {                    url: "",                   templateUrl:'test2.html'                });    });</script></body></html>

显示结果：

这句话是写在test2.html里的。

四、通过controller属性配置控制器

这个比较简单，有两种方式，

1 直接把控制器方法写在路由里：

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title></title>    <script src="js/jquery/jquery-2.1.1.min.js"></script>    <script src="js/angular/angular.min.js"></script>    <script src="js/ui-router/angular-ui-router.min.js"></script></head><body><div ui-view></div><script>    var myApp = angular.module('myApp', ['ui.router']);    myApp.config(function($stateProvider) {        $stateProvider.state('test', {            url: "",            template: "<h1>{{title}}</h1>",            controller:function($scope){                $scope.title='测试控制器';                console.log('如果显示[测试控制器]表示controller配置成功');            }        });    });</script></body></html>

2 controller通过函数名指向一个函数

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title></title>    <script src="js/jquery/jquery-2.1.1.min.js"></script>    <script src="js/angular/angular.min.js"></script>    <script src="js/ui-router/angular-ui-router.min.js"></script></head><body><div ui-view></div><script>    var myApp = angular.module('myApp', ['ui.router']);    myApp.config(function($stateProvider) {        $stateProvider.state('test', {            url: "",            template: "<h1>{{title}}</h1>",            controller:'myCtrl'        });    });    myApp.controller('myCtrl',myCtrl);    function myCtrl($scope){        $scope.title='测试控制器';        console.log('如果显示[测试控制器]表示controller配置成功');    }</script></body></html>

注意事项：myApp.controller('myCtrl',myCtrl);

记得在模块里配置！

附：还有一种controllerAS的用法，就不写了

0 0