在家都知道，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="data: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="data: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="data: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="data: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="data:images/top.png"/> 回顶部</button>
                </div>
            </div>
        </div>
        <div class="container text-center">
            <p>&nbsp;</p>
            <img src="data:images/zw.gif" /><img src="data: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="data:images/top.png"/> 回顶部</button>
                    <div class="text-center">
                        <p>&nbsp;</p>
                        <img src="data:images/zw.gif" /><img src="data: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="data:images/breakfast_a.png" class="img-responsive">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="#pic/1">
                        <img src="data:images/lunch_a.png" class="img-responsive">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="#pic/2">
                        <img src="data:images/dinner_a.png" class="img-responsive">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="#pic/3">
                        <img src="data: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的浅显的理解，谢谢。

浅谈angularJs的更多相关文章

  1. 浅谈AngularJS中的$parse和$eval

    AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. 总的来说,$parse和$eval都是作用于Ang ...

  2. 浅谈AngularJS启动引导过程

    我们都知道AngularJS默认会执行app.js来启动整个angular项目,但你知道angular具体执行过程吗? 一.自动引导启动框架 例如我们有如下代码,我们想要完成一个指令功能: <h ...

  3. 浅谈angularJS指令的属性

    restrict – 这个属性用来指定指令在HTML中如何使用(指令的四种表示方式).我们使用 ‘AE’,这个指令可以被当作新的HTML元素或者属性来使用.如果要允许指令被当作class来使用,我们将 ...

  4. 浅谈AngularJS中的指令和指令间的相互通信

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  5. 浅谈AngularJS的$parse服务

    $parse 作用:将一个AngularJS表达式转换成一个函数 Usage$parse(expression) arguments expression:需要被编译的AngularJS语句 retu ...

  6. 浅谈Angularjs至Angular2后内置指令的变化

    一.科普概要说明 我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...

  7. 浅谈AngularJS中使用$resource

    这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了. REST是Representational ...

  8. 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！

    作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...

  9. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

随机推荐

  1. python多进程——fork()

    简介    程序每次执行时,操作系统都会创建一个新进程来运行程序指令.进程中可调用os.fork,要求操作系统新建一个子进程.[Windowsc系统中,os模块没有os.fork函数]. 每个进程都有 ...

  2. 多线程调用有参数的方法---c# Thread 与 Task

    C#实现多线程的方式:Task——任务   简介 .NET 4包含新名称空间System.Threading.Tasks,它 包含的类抽象出了线程功能. 在后台使用ThreadPool. 任务表示应完 ...

  3. mysql主从同步原理及错误解决

    mysql主从同步的原理: 1.在master上开启bin-log日志功能,记录更新.插入.删除的语句. 2.必须开启三个线程,主上开启io线程,从上开启io线程和sql线程. 3.从上io线程去连接 ...

  4. MySQL(五）中的redo&undo&binlog

    MySQL中有六种日志文件,分别是:重做日志(redo log).回滚日志(undo log).二进制日志(binlog).错误日志(errorlog).慢查询日志(slow query log).一 ...

  5. java学习基础知识入门

    基础入门知识(一) 一.java技术的分类 java按照技术标准和应用场景的不同分为三类,分别是JAVASE.JAVAEE.JAVAME JAVASE : 平台标准版,用于开发部署桌面,服务器以及嵌入 ...

  6. Linux下使用Vim粘贴文本错乱问题解决

    在使用vim进行文档操作时,经常需要进行复制粘贴,在粘贴大量代码时,出现行错位等各种错乱,查找问题解决办法: vim进入文件后,先ESC 在出入 :set paste  回车后再按下 i  之后进行粘 ...

  7. Git 版本恢复命令reset

    reset命令有3中方式: git reset -mixed: 此为默认方式,不带任何参数的git reset, 使用这种方式,项目会回退到某个版本,只保留源码,回退commit和index的信息. ...

  8. WUST Oracle数据库 实验一实验二

    链接:https://pan.baidu.com/s/1hCzvTLzXhyItP2gD_69gzg 提取码:j68f 复制这段内容后打开百度网盘手机App,操作更方便哦

  9. python之SQLite笔记

    sqlite3 打开文件并创建游标 conn = sqlite3.connect('adressbook.db')c = conn.cursor() 连接对象:sqlite3.connect('数据文 ...

  10. EXTI中断开关点亮LED源码

    在KEY点亮LED源码的基础上 USER下新建EXIT文件夹,新建bsp_exit.c和bsp_exit.h,添加到工程中(魔术棒添加头文件所在文件夹) bsp_exit.h内容 #ifndef BS ...