微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angularjs知识点

<!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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐