AngularJS浅谈angularJs

  在家都知,angular
可以兑现双项数据绑定,其中其的占位符是{{}},他是凡MVC数据分离,

  首先要当<html>或<body>中建一个<body ng-app=””>

<p>我之第一只表达式: {{ 5 + 5
}}</p>

</body>

ng-app 指令用于告诉 AngularJS 应用即这个因素是根元素。

拥有 AngularJS 应用都必要而一个根元素。

HTML 文档中不过同意有一个 ng-app 指令,如果来差不多只 ng-app
指令,则只有首先独照面给以。

下面,我来具体用一个册页之实例来验证一下angular职能,SH首先要以项目之根本目录下建造一个index文件夹,<!DOCTYPE
html>
<html>
    <head>
        <meta name=”viewport” content=”width=device-width,
initial-sacle=1.0″ />
        <title></title>
        <link rel=”stylesheet” href=”css/bootstrap.min.css” />
        <link rel=”stylesheet” href=”css/bootstrap-theme.min.css”
/>
    </head>
    <body ng-app=”myapp”>
        <div ng-view></div>
        <nav class=”navbar navbar-inverse navbar-fixed-bottom”>
            <div class=”container-fluid”>
                <div class=”row text-center”>
                    <div class=”col-md-3 col-sm-3 col-xs-3″><a
href=”#home” class=”navbar-link”><img src=”images/home.png”
class=”img-responsive center-block” />首页 </a></div>
                    <div class=”col-md-3 col-sm-3 col-xs-3″><a
href=”#” class=”navbar-link”><img src=”images/tel.png”
class=”img-responsive center-block” />电话</a></div>
                    <div class=”col-md-3 col-sm-3 col-xs-3″><a
href=”#contact” class=”navbar-link”><img src=”images/map.png”
class=”img-responsive center-block”
/>联系我们</a></div>
                    <div class=”col-md-3 col-sm-3 col-xs-3″><a
href=”#about” class=”navbar-link”><img src=”images/guestbook.png”
class=”img-responsive center-block”
/>关于我们</a></div>
                </div>
            </div>

        </nav>
        <div style=”padding:50px;”></div>

        <script src=”js/jquery.min.js”></script>
        <script src=”js/bootstrap.min.js”></script>
        <script src=”js/angular.js”></script>
        <script src=”js/angular-route.js”></script>
        <script>
            var app=angular.module(‘myapp’,[‘ngRoute’]);
            app.config([‘$routeProvider’,function($routeProvider){
                $routeProvider
                    .when(‘/home’,{
                        templateUrl:’view/home.html’,
                        controller:’indexController’
                    })
                    .when(‘/contact’,{
                        templateUrl:’view/contact.html’,
                        controller:”
                    })
                    .when(‘/about’,{
                        templateUrl:’view/about.html’,
                        controller:’aboutController’
                    })
                    .otherwise({redirectTo:’/home’})
                    
            }])

        </script>
        <script
src=”controller/indexController.js”></script>
        <script
src=”controller/aboutController.js”></script>
    </body>
</html>

  然后只要于view文件夹下面要建造一个about子页面:<!DOCTYPE html>
<html>
    <head>
        <meta name=”viewport” content=”width=device-width,
initial-sacle=1.0″ />
        <title></title>
        <link rel=”stylesheet” href=”../css/bootstrap.min.css”
/>
        <link rel=”stylesheet” href=”../css/bootstrap-theme.min.css”
/>
    </head>
    <body>
        <nav class=”navbar navbar-inverse”>
            <div class=”col-md-2 col-md-push-5″>
            <ul class=”nav navbar-nav” >
                <li class=”active dropdown”>
                    <a href=”javascript:;” data-toggle=”dropdown”
>关于我们 <span class=”caret”></span></a>
                    <ul class=”dropdown-menu nav nav-tabs”
id=”list”>
                        <li><a
href=”#”>项目1</a></li>
                        <li><a
href=”#”>项目2</a></li>
                        <li><a
href=”#”>项目1</a></li>
                        <li><a
href=”#”>项目2</a></li>
                    </ul>
                </li>

            </ul>
            </div>

        </nav>

        <div class=”container”>
            <div class=”row”>
                <div class=”col-md-2″></div>
                <div class=”col-md-8″>
                    <div class=”col-md-6″
ng-controller=”aboutController” ng-repeat=”pencraft in subPencraft”
>
                        <div class=”thumbnail text-center”>
                            <img src={{pencraft.img_about}} />
                          
 <h4>{{pencraft.tit_about}}</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class=”row”>
                <div class=”col-md-2″></div>
                <div class=”col-md-8″>
                    <button class=”form-control”> <img
src=”images/top.png”/> 回顶部</button>
                </div>
            </div>
        </div>
        <div class=”container text-center”>
            <p> </p>
            <img src=”images/zw.gif” /><img
src=”images/english.gif” />
            <p>xxx新闻中心 版权所有</p>
        </div>
        
        <script src=”../js/jquery.min.js”></script>
        <script src=”../js/bootstrap.min.js”></script>
        <script>
            

        </script>
    </body>
</html>

还要建一个关联我的子页面:<!DOCTYPE html>
<html>
    <head>
        <meta name=”viewport” content=”width=device-width,
initial-sacle=1.0″ />
        <title></title>
        <link rel=”stylesheet” href=”../css/bootstrap.min.css”
/>
        <link rel=”stylesheet” href=”../css/bootstrap-theme.min.css”
/>
    </head>
    <body>
        <div class=”container”>
            <div class=”row well”>
                <div class=”col-md-4″></div>
                <div class=”col-md-4″>
                    <div class=”thumbnail”>
                        <div class=”caption”>
                            <h2>联系我们</h2>
                            <p>电话:010-88888888</p>
                            <p>手机:13588888888</p>
                            <p>Email:12345@qq.com</p>
                          
 <p>地址:北京市海淀区学院里春天花园8栋906</p>
                            <textarea class=”form-control”
rows=”9″></textarea>
                        </div>
                    </div>
                    <button class=”form-control”> <img
src=”images/top.png”/> 回顶部</button>
                    <div class=”text-center”>
                        <p> </p>
                        <img src=”images/zw.gif” /><img
src=”images/english.gif” />
                        <p>xxx新闻中心 版权所有</p>
                    </div>
                </div>
                
            </div>
            
        </div>
        
        
        <script src=”../js/jquery.min.js”></script>
        <script src=”../js/bootstrap.min.js”></script>
    </body>
</html>

  以品种新建一个controller文件夹,新建一个aboutController.js文件夹app.controller(“aboutController”,function($scope){

    $scope.subPencraft=[
          
 {“img_about”:”images/wenhua.png”,”tit_about”:”天道酬勤”},
            {“img_about”:”images/sp.png”,”tit_about”:”宣传视频”},
        ]
})

还要建一个contactController.js文件夹app.controller(“arryController”,function($scope){

    $scope.imga=[
        {“img_about”:”images/15_l.jpg”,”about”:”关于我们”},
        {“img_about”:”images/20_l.jpg”,”about”:”新闻资讯”},

        {“img_about”:”images/15_l.jpg”,”about”:”关于我们”},
        {“img_about”:”images/20_l.jpg”,”about”:”新闻资讯”},

        {“img_about”:”images/15_l.jpg”,”about”:”关于我们”},
        {“img_about”:”images/20_l.jpg”,”about”:”新闻资讯”},

        {“img_about”:”images/15_l.jpg”,”about”:”关于我们”},
        {“img_about”:”images/20_l.jpg”,”about”:”新闻资讯”},

        ]
})

还有iindexController.js文件夹:app.controller(‘indexController’,function($scope){

                $scope.about=’关于我们’
                $scope.img_about=’images/15_l.jpg’

                $scope.news=’新闻资讯’
                $scope.img_news=’images/20_l.jpg’

                $scope.writings=’作品显得’
                $scope.img_writings=’images/23.jpg’

                $scope.download=’资料下载’
                $scope.img_download=’images/30.jpg’

                $scope.employ=’人才招聘’
                $scope.img_employ=’images/8.jpg’

                $scope.messages=’在线留言’
                $scope.img_messages=’images/9.jpg’

                $scope.contact=’联系我们’
                $scope.img_contact=’images/31.jpg’

                $scope.dial=’一键拨号’
                $scope.img_dial=’images/dial.jpg’
            })

下面还有平等栽是肯德基的实例:<html>
    <head>
        <meta name=”viewport” content=”width=device-width,
initial-scale=1″>
        <link rel=”stylesheet” href=”css/bootstrap.css”>
        <link rel=”stylesheet” href=”css/bootstrap-theme.css”>
        <script src=”js/jquery-1.9.1.js”></script>
        <script src=”js/bootstrap.js”></script>
        <script src=”js/angular.js”></script>
        <script src=”js/angular-route.js”></script>
    </head>
    <body ng-app=”myapp”>
        <div ng-view></div>
        <div class=”container”>
            <div class=”row navbar-fixed-bottom”>
                <div class=”col-xs-3″>
                    <a href=”#pic/0″>
                        <img src=”images/breakfast_a.png”
class=”img-responsive”>
                    </a>
                </div>
                <div class=”col-xs-3″>
                    <a href=”#pic/1″>
                        <img src=”images/lunch_a.png”
class=”img-responsive”>
                    </a>
                </div>
                <div class=”col-xs-3″>
                    <a href=”#pic/2″>
                        <img src=”images/dinner_a.png”
class=”img-responsive”>
                    </a>
                </div>
                <div class=”col-xs-3″>
                    <a href=”#pic/3″>
                        <img src=”images/24h_a.png”
class=”img-responsive”>
                    </a>
                </div>
            </div>
        </div>
    </body>
    <script>
        var app=angular.module(‘myapp’,[‘ngRoute’]);
        app.config([‘$routeProvider’,function($routeProvider){
                $routeProvider
              
 .when(‘/pic/:id’,{templateUrl:’view/home.html’,controller:’home’})
                .otherwise({redirectTo:’/pic/0′})
            }])
    </script>
    <script src=”controller/home.js”></script>
</html>

接下来于view文件夹着树立一个home.html文件夹。

<html>
    <head>
        <meta name=”viewport” content=”width=device-width,
initial-scale=1″>
        <link rel=”stylesheet” href=”css/bootstrap.css”>
        <link rel=”stylesheet” href=”css/bootstrap-theme.css”>
        <script src=”js/jquery-1.9.1.js”></script>
        <script src=”js/bootstrap.js”></script>
    </head>
    <body>
        <div class=”container”
style=”background-image:url(images/bk.png)”>
            <div class=”row”>
                <div class=”col-xs-6″ ng-repeat=”img in imga”>
                    <img src=”{{img.pic}}”>
                </div>
                
            </div>
        </div>
    </body>  
</html>

每当列蒙建立一个controller文件夹里面又打一个home.js内容是app.controller(‘home’,function($scope,$http,$routeParams){
        $http({
            method:’GET’,
            url:’model/data.json’
        }).success(function(data,status,header,config){
                $scope.imga=data[parseInt($routeParams.id)]
        }).error(function(status){
                
        });
    });

接下来又筑一个model文件夹,建立一个data.json文件夹,里面写二维数组[
    [
        {“pic”:”images/b_1.png”},
        {“pic”:”images/b_1.png”},
        {“pic”:”images/b_1.png”},
        {“pic”:”images/b_1.png”},
        {“pic”:”images/b_1.png”},
        {“pic”:”images/b_1.png”}
    ],
    [
        {“pic”:”images/l_1.png”},
        {“pic”:”images/l_1.png”},
        {“pic”:”images/l_1.png”},
        {“pic”:”images/l_1.png”},
        {“pic”:”images/l_1.png”},
        {“pic”:”images/l_1.png”}
    ],
    [
        {“pic”:”images/d_1.png”},
        {“pic”:”images/d_1.png”},
        {“pic”:”images/d_1.png”},
        {“pic”:”images/d_1.png”},
        {“pic”:”images/d_1.png”},
        {“pic”:”images/d_1.png”}
    ],
    [
        {“pic”:”images/h_1.png”},
        {“pic”:”images/h_1.png”},
        {“pic”:”images/h_1.png”},
        {“pic”:”images/h_1.png”},
        {“pic”:”images/h_1.png”},
        {“pic”:”images/h_1.png”}
    ]
]

这么一个肯德基的MVC数据分离之法力就下了。以上就是是自身对anjular的通俗的知情,谢谢。

 

相关文章