AngularJS框架基本标签

我讲一下基本的标签意思,以及用法:

如果想要学习angularJS的可以参考菜鸟教程:http://www.runoob.com/

ng-init="a=‘老牛‘;b=‘大讲堂‘"//初始化变量的名字ng-model="a"//定义一个变量,引用时直接用{{a}}就行了ng-app="myApp"//声明名字是myapp模块的作用域。ng-controller="myCtrl"//声明名字为myCtrl控制器的作用域。ng-repeat="list in data"//list代表循环的每一项,data是一个数组集合。

 <html>
   <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../other/angular.min.js" ></script>
    <script>
      var data=[
        {name:"老牛大讲堂1"},
        {name:"老牛大讲堂2"},
        {name:"老牛大讲堂3"}
       ]
      var app=angular.module("myApp",[]);//声明一个模块myApp,
      app.controller("myCtrl",function($scope){//声明一个控制器myCtrl
         $scope.data=data;//声明一个变量data
      });
    </script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">//声明myApp模块,和myCtrl控制器的作用域。
      <ul>
       <li ng-repeat="list in data">//list代表:{name:"老牛大讲堂1"},data就是数据集.相当于for循环。
        {{list.name}}
       </li>
      </ul>
    </div>
  </body>
</html>

如图所示:

时间: 2024-10-11 16:35:13

AngularJS框架基本标签的相关文章

搭建带路由的AngularJs框架

一.AngularJs框架简介: AngularJs是一种能够轻松实现一个应用开发的JS框架,其较为突出的特点是:模块化.数据的双向绑定和依赖注入等等. 模块化:AngularJs中存在模块的概念,即每个模块必须由一个控制器来控制,控制器在应用中具有唯一一个名称: 双向绑定:将控制器中赋值给变量的数据通过一个通道($scope)实现视图(view)和控制器(controller)之间的连接,视图在修改数据时会立刻更新$scope,同样的$scope发生改变时也会立刻重新渲染视图: 依赖注入:类似

(八)简单了解下angularJS框架中NB的双向数据绑定机制,大大减少需要重复的开发代码量

之前写的第一篇angularJS入门文章 ,介绍ng-model的时候提到:使用angularJS的双向数据绑定机制,不需要我们编写繁琐的代码来实现同样的功能.现在我们看一个比较震撼的例子,看看angularJS是如何减少我们在前端开发中的繁琐劳动的.越是感受到框架功能的强大,越是能够激发学习的兴趣和动力. 假如我们有一个学生信息列表,包含学生的姓名.地址和年龄信息.假如这个数据源信息保存在data.js文件中. var g_phones = [ <span style="white-sp

简洁AngularJS框架后台管理系统bootstrap后台模板

最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS 高级管理系统模板.它建造在流行的Twitter Bootstrapv3框架上.Minovate完全基于HTML5 + CSS3标准.是充分响应的支持每一个设备和浏览器. Minovate包含许多示例页面可以使用它的元素和可定制的.你可以选择6种颜色的头部样式.导航.你可以切换固定导航,标题和选择等

10 个非常有用的 AngularJS 框架

AngularJS是最流行的开源web app框架.AngularJS被用于解决阻碍单页应用程序开发的各种挑战. 你作为一个AngularJS用户,却不知道一些可以帮助你美化编码的资源?那么一定不能错过这篇文章,下面我们就会给大家介绍10个最佳的AngularJS框架,帮助你美化编码,让你可以快速方便地创建创新的网站应用程序. 1.Angular UI Bootstrap 从名字你就可以知道,Angular UI Bootstrap使用顶级框架——Bootstrap构建.你可以使用此框架来重写现

十佳AngularJS框架

您是否还在烦恼如何没有困难地创建一个创新型的Web应用程序?那么一定不要错过这个集合!在本文中,小编为大家收集了十个非常棒的AngularJS框架.AngularJS框架拥有大量有用的工具和组件,可以帮助开发人员轻松并且不浪费时间地创建清新并且附有创意的Web应用程序. NO.1 Angular UI Grid是AngularJS的数据表格,同时还是AngularUI套件一部分.Angular UI Grid的插件架构允许您只使用所需要的功能,对于大的数据集拥有超高的性能,支持超过10,000+

关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p> .... <p id="#target">我是目标位置</p> ... 在js中实现跳转也是利用了这一点,下面直接在代码中解释吧: 1 <body> 2 <ul> 3 <li><a href="#/mus

angularjs 与django标签语法冲突的解决办法

在需要使用angularjs标签的地方套上verbatim标签,如: {% verbatim %} ... {% endverbatim %}

java企业框架tab标签_maven非maven版本

开发快报: 页面打印功能,websocket 强制下线功能,玩转websocket技术  [金牌] 获取[下载地址]   QQ: 313596790 A 代码生成器(开发利器);      增删改查的处理类,service层,mybatis的xml,SQL( mysql   和oracle)脚本,   jsp页面 都生成    就不用写搬砖的代码了,生成的放到项目里,可以直接运行 B 阿里巴巴数据库连接池druid;   数据库连接池  阿里巴巴的 druid.Druid在监控.可扩展性.稳定性

Day1_HTML_框架集标签

7.框架标记及<iframe> 框架页面上不允许有body标签 frameset: 框架的集合 rows: 纵向分部框架. cols: 横向分部框架. 写法有两种: 1) 绝对值  "200,*" ,*代表剩余的 2) 相对值  "30%,*" frame: 框架. 一个框架显示一个页面 scrolling: 是否需要滚动条.默认是true noresize : 固定框架大小 bordercolor: 给框架边框起一个颜色 name : 给框架起一个名字