一、什么是AngularJs？

AngularJs是一个JavaScript框架，通过指令扩展了HTML,并且通过表达式绑定数据到HTML.

AngularJs使得开发现代的单页面应用程序(SPA:Single Page Applications)变得更加简单，并且其避免了js中的DOM操作，使得加载速度大大加快。

二、Angular入手模板框架搭建

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript" src="angular.min.js"></script>

	</head>

	<body ng-app = "app" ng-controller='myVC'>

	</body>

	<script>

		var app = angular.module('app',[]).controller('myVC',function($scope){};

	</script>

</html>

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令定义了应用,也就是angular指令有效的作用域, ng-controller 定义了控制器，一个作用域内可以定义多个控制器。

三、Angular常用指令及用法

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">

</div>

　　

ng-model 指令把元素值（比如输入域的值）绑定到应用程序，{{ name }} 是通过 ng-model="name" 进行同步。

<input type="number"    ng-model="quantity">

<p>{{quantity}}</p>

　　

ng-repeat 指令会重复一个 HTML 元素：

<li ng-repeat="x in names">

      {{ x }}

</li>

　　

.directive 函数来添加自定义的指令:

注：使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive，返回的参数 ——template:html代码。

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        template : "<h1>自定义指令!</h1>"

    };

});

</script>

　

angular入门（基础篇）的更多相关文章

  1. Linux入门基础篇

    Linux入门基础篇 Linux诞生 Linux发行版本说明 Linux官方网站 Linux内核官方网站 比较有名的Linux发行版 虚拟机(Virtual Machine),一个虚拟的系统,安装在系 ...

  2. 智普教育Python视频教程之入门基础篇,python笔记

    智普教育Python视频教程之入门基础篇,python笔记 print id()内存地址 type()变量类型 windows命令行下edit命令 python数据类型不需要指定类型 定义hostna ...

  3. Java正则表达式入门基础篇

    正则表达式是一种可以用于模式匹配和替换的规范,一个正则表达式就是由普通的字符(例如字符a到z)以及特殊字符(元字符)组成的文字模式,它 用以描述在查找文字主体时待匹配的一个或多个字符串.正则表达式作为 ...

  4. object-c 入门基础篇

    原地址:http://www.cnblogs.com/moonvan/archive/2011/10/13/2210498.html 一.Objective-C与C的渊源 Objective-C诞生于 ...

  5. CSS快速入门基础篇，让你快速上手（附带代码案例）

    1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...

  6. 牛客SQL刷题第一趴——非技术入门基础篇

    user_profile表: id device_id gender age university province 1 2138 male 21 北京大学 Beijing 2 3214 male   ...

  7. React入门----基础篇

    React 背景介绍 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做 ...

  8. Java入门到精通——基础篇之多线程实现简单的PV操作的进程同步

    Java入门到精通——基础篇之多线程实现简单的PV操作的进程同步 一.概述     PV操作是对信号量进行的操作.     进程同步是指在并发进程之间存在一种制约关系,一个进程的执行依赖另一个进程的消 ...

  9. Qt入门之基础篇 ( 二 ) ：Qt项目建立、编译、运行和发布过程解析

    转载请注明出处:CN_Simo. 题解: 本篇内容主讲Qt应用从创建到发布的整个过程,旨在帮助读者能够快速走进Qt的世界. 本来计划是讲解Qt源码静态编译,如此的话读者可能并不能清楚地知道为何要静态编 ...

  10. Qt入门之基础篇（三）：掌握Qt4的静态编译基本方法

    转载载请注明出处:CN_Simo. 导语: 前两章都提到过“静态编译”(Static Compilation),在Windows下一次静态编译差不多需要长达三个小时才能完成,而且还非常容易由于各种原因 ...

随机推荐

  1. 洛谷 P1368 工艺 后缀自动机 求最小表示

    后缀自动机沙茶题 将字符串复制一次,建立后缀自动机. 在后缀自动机上贪心走 $n$ 次即可. Code: #include <cstdio> #include <algorithm& ...

  2. 创建支持SSH服务的镜像

    一.基于commit命令创建 docker commit CONTAINER [REPOSITORY [:TAG]] 1.使用ubuntu镜像创建一个容器 docker run -it ubuntu ...

  3. node使用express命令报错找不到ejs的解决方法

    首先确定已经全局安装过好几遍express和express-generator,但一使用express命令直接报找不到ejs模块,全局和本地安装ejs都没用,nodemon模块报同样错误,找不到deb ...

  4. 开源映射平台Mapzen加入了Linux基金会的项目

    2019年1月29日,Linux基金会宣布,开源映射平台Mapzen现在是Linux基金会项目的一部分. Mapzen专注于地图显示的核心组件,如搜索和导航.它为开发人员提供了易于访问的开放软件和数据 ...

  5. Win10 +VS2015 配置openCV3.4.0

    配置过程参考链接:https://www.cnblogs.com/linshuhe/p/5764394.html 其他链接:https://blog.csdn.net/weixin_39393712/ ...

  6. Express的初步使用

    废话不多说直接上步骤: 1. 首先建立一个新文件夹,进入此文件夹的命令窗口通过 npm init 命令为你的应用创建一个           package.json 文件,然后下载express模块 ...

  7. Gradle编译spring3.x报错找不到itextpdf4.2.2解决方案

    google搜到一篇文章:http://www.bdtool.net/blog_356.html 试了文章里的两个方法,方法一不行,方法二有点搞头,但是还有些错.试着试着,突然成功了~ 我是这么做的 ...

  8. 【Hibernate步步为营】--（一对多映射）之单向关联

    上篇文章讨论了双向关联的一对一映射,用了两个章节,主要是从主键和外键两种关联映射展开具体讨论.双向关联的映射须要在两个映射文件里分别加入相互的相应关系.斌刚在相应的类中加入相应的关联类的属性.这样在一 ...

  9. MongoDB 基本使用

    数据库基本操作 连接到mongoDBserver  1 ./bin/mongo 127.0.0.1:12345  查看当前数据库 1 2 3 > show dbs admin  (empty) ...

  10. HDU 4572 Bottles Arrangement

    具体的证明:点击打开链接 我的想法: 要想保证题目所说 构造最小行的和,仅仅能是这样的情况 .....      m-3  m-2  m-1  m    |   m  m-1  m-2  m-3   ...