angularjs中的MVC:路由、控制器继承

最新推荐文章于 2020-11-02 15:56:51 发布

Mars-xq

最新推荐文章于 2020-11-02 15:56:51 发布

阅读量1.7k

点赞数

分类专栏： angularjs angularjs

本文链接：https://blog.csdn.net/sinat_31057219/article/details/56290284

版权

angularjs 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

angularjs

37 篇文章 0 订阅

订阅专栏

参考：

《angularjs实战》

model

显式与隐式model的定义

<body>
<div ng-controller="c5_1">
    <!--显式-->
    <div class="show">{{name}}</div>

    <!--隐式：ng-model-->
    <input ng-model="score" value="95"/>
    <div class="show">{{score}}</div>

    <input ng-model="num"/>
    <div class="show">{{num}}</div>
</div>

<script type="text/javascript">
    var a5_1 = angular.module('a5_1', []);
    a5_1.controller('c5_1', ['$scope', function ($scope) {
        $scope.name = "张三";
        $scope.num = "2"
    }]);
</script>
</body>

model对象的遍历

<body>
<div ng-controller="c5_2">
    <p ng-repeat=" stu in data" class="show">
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
    </p>
</div>

<script type="text/javascript">
    var a5_2 = angular.module('a5_2', []);
    a5_2.controller('c5_2', ['$scope', function ($scope) {
        $scope.data = [
            {name: "张明明", sex: "女"},
            {name: "李清思", sex: "女"},
            {name: "刘小华", sex: "男"},
            {name: "陈忠忠", sex: "男"}
        ];
    }]);
</script>
</body>

controller

控制器的属性和方法

<body>
    <div ng-controller="c5_3">
        <button ng-click="changeA()">李四</button>
        <button ng-click="changeB()">王二</button>
        <p class="show">我的名字叫：{{name}}</p>
    </div>
    <script type="text/javascript">
        var a5_3 = angular.module('a5_3', []);
        a5_3.controller('c5_3', function ($scope) {
            $scope.name = '张三';
            $scope.changeA = function () {
                $scope.name = '李四';
            }
            $scope.changeB = function () {
                $scope.name = '王二';
            }
        });
    </script>
</body>

控制器方法中的参数

<body>
<div ng-controller="c5_4">
    <div class="show">
        <input ng-model="a" value="0"/><!--ng-model传递输入域的值到程序中-->

        <span>{{type}}</span><!--表达式把程序中的值显示在HTML中-->

        <input ng-model="b" value="0"/>

        <span>=</span>

        <span class="show">{{result}}</span>
    </div>
    <div class="show">
        <button ng-click="change(1)">加法</button>
        <!--1为true（非零）-->
        <button ng-click="change(0)">乘法</button>
        <!--0为false-->
    </div>
</div>

<script type="text/javascript">
    var a5_4 = angular.module('a5_4', []);
    a5_4.controller('c5_4', ['$scope', function ($scope) {
        $scope.type = "+";
        $scope.change = function (t) {
            if (t) {
                $scope.type = "+";
                $scope.result = parseInt($scope.a)
                    + parseInt($scope.b);
            } else {
                $scope.type = "*";
                $scope.result = $scope.a * $scope.b;
            }
        }
    }]);
</script>
</body>

控制器中属性和方法的继承

<body>
<div ng-controller="c5_5">
    <!--父级作用域无法访问子级作用域下控制器的属性和方法-->
    <div class="show">
        {{name_a+"/"+name_b+"/"+name_c+"/"+score}}
        <!--显示结果为：张三///60-->
    </div>

    <!--子级作用域可以访问父级作用域下控制器的属性和方法，
    但相同属性名，子级会复写父级-->
    <div ng-controller="c5_5_1">
        <div class="show">
            {{name_a+"/"+name_b+"/"+name_c+"/"+score}}
            <!--显示结果为：张三/李四//70-->
        </div>

        <!--子级作用域可以访问父级作用域下控制器的属性和方法，
        但相同属性名，子级会复写父级-->
        <div ng-controller="c5_5_1_1">
            <div class="show">
                {{name_a+"/"+name_b+"/"+name_c+"/"+score}}
                <!--显示结果为：张三/李四/王二/80-->
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var a5_5 = angular.module('a5_5', []);
    a5_5.controller('c5_5', ['$scope', function ($scope) {
        $scope.name_a = "张三";
        $scope.score = 60;
    }]);
    a5_5.controller('c5_5_1', ['$scope', function ($scope) {
        $scope.name_b = "李四";
        $scope.score = 70;
    }]);
    a5_5.controller('c5_5_1_1', ['$scope', function ($scope) {
        $scope.name_c = "王二";
        $scope.score = 80;
    }]);
</script>
</body>

view

View组件中的模板切换：需要路由

<!doctype html>
<html ng-app="a5_6">
<head>
    <title>View组件中的模板切换</title>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
    <style type="text/css">
        body {
            font-size: 13px;
        }

        .show {
            background-color: #ccc;
            padding: 8px;
            width: 260px;
            margin: 10px 0px;
        }
    </style>
</head>

<body>
<div>
    <a href="#/">首页</a> |
    <a href="#/book">图书</a> |
    <a href="#/game">游戏</a>
</div>

<div ng-view></div>

<script type="text/javascript">
    var a5_6 = angular.module('a5_6', ['ngRoute']);
    a5_6.controller('a5_6_1', ['$scope', function ($scope) {
        $scope.title = "这是首页";
    }]);
    a5_6.controller('a5_6_2', ['$scope', function ($scope) {
        $scope.title = "这是图书页";
    }]);
    a5_6.controller('a5_6_3', ['$scope', function ($scope) {
        $scope.title = "这是游戏页";
    }]);
    a5_6.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'a5_6_1',
                template: "<div class='show'>{{title}}</div>"
            })
            .when('/book', {
                controller: 'a5_6_2',
                template: "<div class='show'>{{title}}</div>"
            })
            .when('/game', {
                controller: 'a5_6_3',
                template: "<div class='show'>{{title}}</div>"
            })
            .otherwise({
                redirectTo: '/'
            });
    }]);
</script>
</body>
</html>

在切换视图模板时传参数，需要路由

例子一：

<!doctype html>
<html ng-app="a5_7">
<head>
    <title>在切换视图模板时传参数</title>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
    <style type="text/css">
        body {
            font-size: 13px;
        }

        .show {
            background-color: #ccc;
            padding: 8px;
            width: 260px;
            margin: 10px 0px;
        }
    </style>
</head>

<body>
<div ng-view></div>

<script type="text/javascript">
    var a5_7 = angular.module('a5_7', ['ngRoute']);
    a5_7.controller('c5_7_1', ['$scope', function ($scope) {
        $scope.students = students;
    }]);
    a5_7.controller('c5_7_2', function ($scope, $routeParams) {
        for (var i = 0; i < students.length; i++) {
            if (students[i].stuId == $routeParams.id) {
                $scope.student = students[i];
                break;
            }
        }
    });
    a5_7.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'c5_7_1',
                templateUrl: "5-7-1.html"
            })
            .when('/view/:id', {
                controller: 'c5_7_2',
                templateUrl: "5-7-2.html",
                publicAccess: true
            })
            .otherwise({
                redirectTo: '/'
            });
    }]);
    var students = [
        {stuId: 1000, name: "张明明", sex: "女", score: 60},
        {stuId: 1001, name: "李清思", sex: "女", score: 80},
        {stuId: 1002, name: "刘小华", sex: "男", score: 90},
        {stuId: 1003, name: "陈忠忠", sex: "男", score: 70}
    ];
</script>
</body>
</html>

5-7-1.html

<div ng-repeat="stu in students" class="show">
    <a href="#view/{{stu.stuId}}">{{stu.name}}</a>
</div>

<!--
http://localhost:63342/slnAngularsrccode/Ch5/5-7.html?_ijt=jtuu2t0uspe1dg8in20ipvsg8j#/：主界面
http://localhost:63342/slnAngularsrccode/Ch5/5-7.html?_ijt=jtuu2t0uspe1dg8in20ipvsg8j#/view/1001：模板视图
-->

5-7-2.html

<div class="show">
    <div>学号：{{student.stuId}}</div>
    <div>姓名：{{student.name}}</div>
    <div>性别：{{student.sex}}</div>
    <div>分数：{{student.score}}</div>
</div>

例子二：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
</head>

<body>
<div ng-controller="TextController">
    <p>{{someText}}</p>
</div>

<div ng-view></div>

<script>
    angular
        .module('myApp', ['ngRoute'])
        .controller('TextController', function ($scope) {
            $scope.someText = '下面就是显示内容的地方';
        })
        .config(function ($routeProvider) {
            /*
             http://localhost:63342/route4/app/index.html?_ijt=jdpjd8hageqceopbhbov94cdi5#/
             * */
            $routeProvider.when('/', {
                controller: ListController,
                templateUrl: 'list.html'
            }).when('/view/:id', { //在id前面加一个冒号，从而制订了一个参数化URL
                /*
                 http://localhost:63342/route4/app/index.html?_ijt=jdpjd8hageqceopbhbov94cdi5#/view/2
                 * */
                controller: DetailController,
                templateUrl: 'detail.html'
            }).otherwise({
                redirectTo: '/'
            });
        }); //配置我们的路由

    messages = [{
        id: 0,
        sender: "11111111@qq.com",
        subject: "你好，这是一封邮件",
        date: "2015年4月13日",
        recipients: ['loin11111@163.com'],
        message: "11111111，我是xxx，这是发送给您的邮件。"
    }, {
        id: 1,
        sender: "2222222@qq.com",
        subject: "你好，这是2封邮件",
        date: "2016年4月13日",
        recipients: ['lin222222222@163.com'],
        message: "2222222222你好，我是xxx，这是发送给您的邮件。"
    }, {
        id: 2,
        sender: "33333333@qq.com",
        subject: "你好，这是③封邮件",
        date: "2017年4月13日",
        recipients: ['lin33333333@163.com'],
        message: "33333333333你好，我是xxx，这是发送给您的邮件。"
    }];

    function ListController($scope) {
        $scope.messages = messages;
    }

    function DetailController($scope, $routeParams) {
        $scope.message = messages[$routeParams.id];
    }
</script>

<script type='text/ng-template' id='list.html'>
    <table>
        <tr>
            <td><strong>发件人</strong></td>
            <td><strong>内容</strong></td>
            <td><strong>日期</strong></td>
        </tr>
        <tr ng-repeat="message in messages">
            <td>{{message.sender}}</td>
            <td><a href="#/view/{{message.id}}">{{message.subject}}</a></td>
            <td>{{message.date}}</td>
        </tr>
    </table>
</script>

<script type='text/ng-template' id='detail.html'>
    <div><strong>项目:</strong>{{message.subject}}</div>
    <div><strong>发送者:</strong>{{message.sender}}</div>
    <div><strong>日期:</strong>{{message.date}}</div>
    <div>
        <strong>To:</strong>
        <span ng-repeat="recipient in message.recipients">
    {{recipient}}
  </span>
    </div>
    <div>{{message.message}}</div>
    <a href="#/">回到列表</a>
</script>

</body>
</html>

例子三：

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
</head>

<!--首先需要在页面引入angular和angular-route，注意要在angular-route之前引入angular
这主要是因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现。-->

<body>

<!--路由功能主要是 $routeProvider服务 与 ng-view 实现。
路由功能是由 routeProvider服务 和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，
当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。-->

<div>
    <a href="#/list">列表</a>
</div>
<!--单页Web应用由于没有后端URL资源定位的支持，需要自己实现URL资源定位。AngularJs使用浏览器URL"#"后的字符串来定位资源。-->
<!--路由机制并非在AngularJS核心文件内，你需要另外加入angular-route.min.js脚本。并且创建mainApp模块的时候需要添加对ngRoute的依赖。-->
</br>
<div ng-view>
</div>
<!--该 div 内的 HTML 内容会根据路由的变化而变化。有以下两种写法-->
<!-- <ng-view></ng-view> 当做标签-->
<!-- <div ng-view ></div> 当做元素-->

<script>
    // 设置当前模块依赖，“ngRoute”，用.NET的解就是给这个类库添加“ngRoute”引用
    angular.module("mainApp", ["ngRoute"])
        .config(["$routeProvider", function ($routeProvider) {
            $routeProvider
            /*when()：配置路径和参数;
             otherwise：配置其他的路径跳转，可以想成default。*/
                .when("/list", { // 指定URL为“/” 控制器：“listController”，模板：“route-list.html”
                    controller: "listController", templateUrl: "route-list.html"
                })
                .when("/view/:id", {// 注意“/view/:id” 中的 “：id” 用于捕获参数ID
                    controller: "viewController", templateUrl: "route-view.html"
                })
                .when("/", { // 跳转
                    redirectTo: "/list"
                })
                .otherwise({redirectTo: "/list"});
        }])

        //创建一个提供数据的服务器
        .factory("service", function () {
            var list = [
                {id: 1, title: "博客园", url: "http://www.cnblogs.com"},
                {id: 2, title: "知乎", url: "http://www.zhihu.com"},
                {id: 3, title: "codeproject", url: "http://www.codeproject.com/"},
                {id: 4, title: "stackoverflow", url: "http://www.stackoverflow.com/"}
            ];
            return function (id) {
                //假如ID为无效值返回所有
                if (!id) return list;

                var t = 0;
                //匹配返回的项目
                angular.forEach(list, function (v, i) {
                    if (v.id == id) t = i;
                });

                return list[t];
            }
        })
        // 创建控制器 listController,注入提供数据服务
        .controller("listController", ["$scope", "service", function ($scope, service) {
            $scope.list = service();//获取所有数据
        }])
        // 创建查看控制器 viewController, 注意应为需要获取URL ID参数
        // 我们多设置了一个 依赖注入参数 “$routeParams” 通过它获取传入的 ID参数
        .controller("viewController", ["$scope", "service", '$routeParams', function ($scope, service, $routeParams) {
            $scope.model = service($routeParams.id || 0) || {};
        }]);
</script>
</body>
</html>

route-list.html

<ul ng-repeat="item in list">
    <li><a href="#view/{{item.id}}">{{item.title}}</a></li>
</ul>

route-view.html

<div>
    <div>网站ID：{{model.id}}</div>
    <div>网站名称：<a href="{{model.url}}" rel="nofollow">{{model.title}}</a></div>
    <div>访问地址：{{model.url}}</div>
</div>

<!--
<a href="http://www.runoob.com/">访问菜鸟教程</a>
可以跳转
-->

<!--
http://www.cnblogs.com/shuchao/archive/2009/09/19/rel-nofollow.html
nofollow的使用
nofollow有两种用法：
1.用于meta元标签：<meta name="robots" content="nofollow" />，告诉爬虫该页面上所有链接都无需追踪。
2.用于a标签：<a href="login.aspx" rel="nofollow">登录</a>,告诉爬虫该页面无需追踪。
nofollow的作用
nofollow主要有三个作用：
1.防止不可信的内容，最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接，为了防止页面指向一些拉圾页面和站点。
2.付费链接：为了防止付费链接影响Google的搜索结果排名，Google建议使用nofollow属性。
3.引导爬虫抓取有效的页面：避免爬虫抓取一些无意义的页面，影响爬虫抓取的效率。-->

Mars-xq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs中的MVC:路由、控制器继承

参考：《angularjs实战》model显式与隐式model的定义<body><div ng-controller="c5_1">  <div class="show">{{name}}</div>  <input ng-model="score" value="95"/> <div class="sho
复制链接

扫一扫