一、什么是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. solver及其配置

    solver算是caffe的核心的核心,它协调着整个模型的运作.caffe程序运行必带的一个参数就是solver配置文件.运行代码一般为 # caffe train --solver=*_slover ...

  2. JDOJ 2939: Suffix Automaton 广义后缀自动机_统计子串

    建立广义后缀自动机,对每个节点都建立各自的 $Parent$ 数组. 这样方便统计,不会出现统计错误. 考虑新加入一个字符. 1 这条转移边已经存在,显然对答案没有贡献. 2 这条转移边不存在,贡献即 ...

  3. NodeJS学习笔记 进阶 (8)express+morgan实现日志记录(ok)

    个人总结:这篇文章讲解了Express框架中日志记录插件morgan的示例.读完这篇文章需要10分钟 摘选自网络 章节概览 morgan是express默认的日志中间件,也可以脱离express,作为 ...

  4. Python组织文件 实践:拷贝某种类型的所有文件

    #! python3 #chapter09-test01- 遍历目录树,查找特定扩展名的文件不论这些文件的位置在哪里,都将他们 #拷贝到一个新的文件夹中 import os,shutil,pprint ...

  5. P4555 [国家集训队]最长双回文串(回文树)

    题目描述 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为abc,逆序为cba,不相同). 输入长度为 n 的串 S ,求 S 的最长双回文子串 T ,即可 ...

  6. HDU 4398 Template Library Management (最优页面调度算法)

    中等偏易题.操作系统理论中的最优页面调度算法,贪心.当需要淘汰某个模版时,淘汰掉当前手中在最远的将来才会被用到(或者以后永远不再用到)的那个. 代码: #include <iostream> ...

  7. Unity 调用 Android Native 方法(一) 获得Android系统音量

    学习雷锋,好榜样,接下来的这一系类教程里,将通过unity来实现Android端的一些常用功能, 不需要在 Asset/Plugins/Android 目录下引用jar包或者aar包,这是重点. us ...

  8. 【Henu ACM Round#20 E】Star

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找规律. 1,13,37.... 6n(n-1) + 1 [代码] #include <bits/stdc++.h> # ...

  9. No enclosing instance of type E is accessible.

    No enclosing instance of type E  is accessible. 静态方法(main)中调用内部类,会出现这样的问题: 学习了:https://www.cnblogs.c ...

  10. Maven的SSH搭建以及部署

    本人有点傻,研究Maven研究了有一段时间,刚刚有些入门,记录下来方便以后使用 工作环境:jdk7 myeclipse10 maven3.1.1 1 下载maven3.1.1 http://maven ...