第十讲angularjs ngSanitize ngRoute ngAnimate 插件

学习要点:

  1. Angularjs 中的 ngSanitize

  2. Angularjs 中的 ngRoute

  3. Angularjs 中的 ngAnimate

    主讲教师:(树根)

    合作网站:www.phonegap100.com(PhoneGap中文网)合作网站:www.itying.com(IT)

1.Angularjs中的ngSanitize

让浏览器简析html标签
1.引入js angular-sanitize.min.js
2.
module中引入一下插件var app = angular.module("myApp", ['ngSanitize']);3.使用<divng-bind-html="text"></div>绑定数据

2.Angularjs中的ngRoute

AngularJS路由介绍:

AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样。后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML)AngularJS的前端路由,需求提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中。

AngularJS的前端路由,虽然URL输入不一样,页面展示不一样,其实完成的单页(ng-app)视图(ng-view)的局部刷新。这样来看,AngularJS做单页应用就有点标配的感觉了。

AngularJS路由使用:引入js依赖注入

<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>var m1 = angular.module('myApp',['ngRoute']); 

<pre name="code" class="html">app.config(['$routeProvider',function($routeProvider){
    $routeProvider
        .when('/aaa',{
            template:'<p>首页内容</p>{{name}}',
            controller:'one'
        })
        .when('/bbb',{
            template:'<p>学员的内容</p>{{name}}',
            controller:'two'
        })
        .when('/ccc',{
            template:'<p>课程的内容</p>{{name}}',
            controller:"three"
        })
         .when('/content/:num',{
            template:'<p>课程的内容{{id}}</p>{{name}}',
            controller:"four"
        })
        .otherwise({
            redirectTo:'/aaa'
        });
}]);

数据显示:
<div ng-view></div>$routeParams获取参数路由事件:

$on
$routeChangeStart$routeChangeSuccess/Error 

app.run(['$rootScope',function($rootScope){
    $rootScope.$on('$routeChangeStart',function(event,current,pre){
        console.log(event);
        console.log(current);
        console.log(pre);
    })
}])

页面跳转

1.$location.path('aaa/123')2.<a href=#div1></a>

ionic 路由插件https://github.com/angular-ui/ui-router 


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		/*.box div{ width:300px; height: 400px; border:13px solid red; margin: 20px 0; }
		.box ul{position: fixed; right: 100px; top:100px;}*/
</style>
</head>
<body>
<div ng-app="myapp" >
    <div class="box">
        <a href="#aaa" >第一个</a>
        <a href="#bbb" >第二个</a>
    	<a href="#ccc" >第三个</a>
        <a href="#content/12">第四个</a>
         <div ng-view></div>
    </div>
   <!--  <div ng-view></div> -->
	

</div>

<script src="angular-1.3.0.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
<script type="text/javascript">
 var app = angular.module("myapp",['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
    $routeProvider
        .when('/aaa',{
            template:'<p>首页内容</p>{{name}}',
            controller:'one'
        })
        .when('/bbb',{
            template:'<p>学员的内容</p>{{name}}',
            controller:'two'
        })
        .when('/ccc',{
            template:'<p>课程的内容</p>{{name}}',
            controller:"three"
        })
         .when('/content/:num',{
            template:'<p>课程的内容{{id}}</p>{{name}}',
            controller:"four"
        })
        .otherwise({
            redirectTo:'/aaa'
        });
}]);

app.run(['$rootScope',function($rootScope){
    $rootScope.$on('$routeChangeStart',function(event,current,pre){
        console.log(event);
        console.log(current);
        console.log(pre);
    })
}])

app.controller('one',['$scope','$location',function($scope,$location){
    $scope.name ="hello"
    // $scope.$location = $location;
    // con sole.log($routeParams)
}])
app.controller('two',['$scope',function($scope){
    $scope.name = 'hi'
}])
app.controller("three",['$scope',function($scope){
    $scope.name = '你好'
}])
app.controller("four",['$scope','$routeParams',function($scope,$routeParams){
    console.log($routeParams);
    $scope.id = $routeParams.num;
    $scope.name = 'div4'
}])

</script>

</body>
</html>




没有更多推荐了,返回首页