AngularJs总结

angularJs在前端开发过程中是一件重器，它使得前端代码编辑简单，数据变化方便，尤其是可以让页面切换流畅。接下来我将在下面简单介绍在实战项目中如何使用angularJs。
首先，我们得在首页上面引用它的js文件

接下来，我们再在首页文件first.html中定义angular项目名称

再定义根controller的名称

此时，我们就能在创建viewApp.js文件来操作整个页面了

在viewApp.js里面我们必须在第一句写上

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

在这一句的下方，我们就可以定义想要的模块了,我简单写了directive模块和controller模块，一下是示例

//directive模块
//angular中自定义标签
viewApp.directive('swapbox',function(){
   return {
       restrict: 'A',
       replace: true,
       template:
        '
'+
        '
'+
        '最新动态：'+
        '
'+
        '
【温馨提示】网站支付教程请点击这里
【13163296359】购买了两套猪哥靓！
【13163296359】购买了一套3G怀孕母猪智能饲喂器！
【最新消息】网站客服24小时在线！！！
【公司动态】JYGA与中畜开展第一次交流会！
'+
        '
'+
        '
【温馨提示】网站支付教程请点击这里
【13163296359】购买了两套猪哥靓！
【13163296359】购买了一套3G怀孕母猪智能饲喂器！
【最新消息】网站客服24小时在线！！！
【公司动态】中畜公司携手加拿大JYGA公司签订战略合作协议
'+
        '
'+
        '
',
       link: function () {
               angular.element('.swap').html(angular.element('.news_li').html());
               var x = angular.element('.news_li');
               var y = angular.element('.swap');
               var h = angular.element('.news_li li').length * 19;
               setTimeout(b,3000);
               function b(){
                   t = parseInt(x.css('top'));
                   y.css('top', '19px');
                   x.animate({top: t-19 +'px'},'slow');
                   if(Math.abs(t) == h-19 ){
                       y.animate({top:'0px'},'slow');
                       z = x;
                       x = y;
                       y = z;
                   }
                   setTimeout(b,3000);
               };
       }
   }
});
//在angular中正确使用插件的简单方法
viewApp.directive('fancybox', function () {
    return {
        restrict: 'A',
        controller: function($scope) {
            $scope.openFancybox = function (url) {

             $.fancybox.open({
                 href : url,
                 title : '李明'
             });

            };
        }
    };
});

//controller模块
viewApp.controller('NewsCtrl', function($scope ,$http) {
    //amazeui的加载进度条
    $.AMUI.progress.start();
   //向后台传参数并返回值
    $http.get('.../getNewsList.action').then(
        function(success){
            $scope.news = success.data;
            $.AMUI.progress.done();
        },
        function(){
            alert('获取新闻列表失败！');
        }
    )

});

angularJs还有factory、service模块，这里不介绍。
接下来划重点，angular-ui-router路由,不废话贴代码

viewApp.config(
    [          '$locationProvider','$stateProvider', '$urlRouterProvider',
        function ($locationProvider,$stateProvider,   $urlRouterProvider ) {
          //解决地址栏出现！#
            $locationProvider.hashPrefix('');
            $urlRouterProvider
                .otherwise('/');
            $stateProvider
                .state('eliteTeam', {
                    url: '/eliteTeam',
                    templateUrl: 'static/frontPage/eliteTeam.html'
                })
                .state('knowZC', {
                    url: '/knowZC/:ord',
                    controller: 'knowZCCtrl',
                    templateUrl: 'static/frontPage/knowZC.html',
                    resolve : {
                        promiseObj : function($http,$stateParams){
                            return $http({
                                method : 'GET' ,
                                url : "static/frontPage/navigation/content/"+$stateParams.ord
                            });
                        }
                    }
                })
                .state('activitys', {
                    url: '/activitys/:id',
                    templateUrl: 'static/frontPage/activity.html',
                    controller: 'acContentCtrl',
                    resolve : {
                        promiseObj : function($http,$stateParams){
                            return $http({
                                method : 'GET' ,
                                url : "static/frontPage/activitys/content/"+$stateParams.id
                            });
                        }
                    }
                });


        }
    ]
);

angular验证完全不用写js

                 
{{x.pName}}
                    

                     
                       
                                                                                                                     
                        

                            购买单位：
                            
                            
                        
                        

                            您的姓名：
                            
                                
                                
姓名不能为空
                      

                        
                        

                            联系电话：
                           
                                
                                
联系电话不能为空
                                
电话格式错误
                         

                        
                        

                            邮箱地址：
                         
                                
                                
邮箱地址不能为空
                                
邮箱地址格式错误
                        

                        
                        

                            收货地址：
                          
                                
                                
收货地址不能为空
                           

                        
                        

                            产品套数：
                           
                                
                                
套数不能为空
                        
                        
                        

                            备注信息：
                           
                                
                        
                    
                    

                        
                    
                

前端页面动态数据加载,十分方便

                

                    
{{x.rPosition}}
                    
                        
{{x.rContent}}
                    

      
 

以上是非常简单的angular总结，用了实战中的代码，若有疑问和建议，请下方留言。