angularjs知识点

发布时间：2020-12-17 07:04:36 所属栏目：安全来源：网络整理

导读：!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"/script script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"/script !-- ng - ap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
    <!--
    ng-app 边界指令
    {{}}  呈现指令
    ng-model    信息指令  用于信息绑定
    ng-bind 绑定指令
    ng-init 初始化指令  :对边界内数据模型初始化  习惯放在BODY上


    -->


</head>
<body ng-app="myApp">

<ul>
    <li><a href="#!home">首页</a></li>
    <li><a href="#!liebiao">列表页</a></li>
</ul>

<!--显示页 把路由templateUrl 页面中的内容写到该DIV中  并加上控制类-->
<div ng-view>


</div>


<script>
    var app = angular.module(‘myApp‘,[‘ngRoute‘]);
    app.controller(‘homeCon‘,function ($scope,$route) {
        //$scope.$route = $route;
        $scope.name = ‘这是首页‘;
        $scope.add = function () {
            alert(‘121212‘);
        }
    })
        .controller(‘liebiaoCon‘,$route) {
            //$scope.$route = $route;
            $scope.name = ‘这是列表页‘;
            $scope.add = function () {
                alert(‘121212‘);
            }
        })
        .config([‘$routeProvider‘,function($routeProvider){
        $routeProvider
            .when(‘/home‘,{
                templateUrl: ‘home.html‘,controller: ‘homeCon‘,})
            .when(‘/liebiao‘,{
                templateUrl: ‘liebiao.html‘,controller: ‘liebiaoCon‘,})
            .otherwise({
                redirectTo:‘/home‘//默认页  只能用CODE
            });



    }]);


</script>

</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!