从script引用angular文件.开始编写angular事件:

在angular文件中添加属性: ag-xxxx;
初始化使用: ng-app="name"; 没有这个属性就不会有框架效果

如果{ng-app}有属性值的话, 则脚本文件中必须添加模型初始化代码: var app = angular.module("name",[]);

有了模块,还必须添加控制器, 这样才能读取到页面上的绑定的数据:
添加angular控制域:
app.controller("控制器名字",function($scope){}); 只能对挂载了ng-controller 内的标签才生效.

如果ng-controller 写在 一个 div 标签内, 则只在这个div标签内有效,  不在这个div内的ng属性则不受controller影响.

$scope. 可以过去页面中绑定的值 可以取值 也可以设置值;

在一个span标签内:   <span ng-model="num"><//span>

$scope.num=1;      设置num值为1:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>angular简单运用</title>

</head>

<body ng-app="myApp" ng-controller="myCon">
　　　　//显示输入字符的个数  简单练手 数据绑定  更为直观

    <input ng-model="text" ng-change="changeval()"/>

        {{num}}/30

        <span>

        {{num3}}

        </span>

</body>

<script src="./view/js/angular.js"></script>

<script>

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

        app.controller("myCon",function($scope,$interval){

　　　　　　　　//通过changval事件显示字符串的长度

            $scope.changeval = function(){

                $scope.num = $scope.text.length;

            };
　　　　　　
        // 定时器服务:$interval

　　　　　　　　　　$scope.num3 = new Date().toLocaleString();
　　　　　　　　　　$interval(function(){
　　　　　　　　　　$scope.num3 = new Date().toLocaleString();
　　　　　　　　　　},1000)

　　　　　　　

        });

    </script>

</html>

在页面中一共有三种数据绑定的方式:

ng-model     这个是双向绑定: (表单控件 input)

ng-bind 　和　　{{ng的一个变量名}} 　　单项绑定 　　用来显示数值的

ng-bind 中不能写内容,他所有的内容都会被绑定的值 所代替, 写入的值 并不能被显示,.

ng-bind  　　{{}}　　这两个绑定函数 -> 显示函数的返回值   　　{{}} 可以直接在函数中赋值,并同步到页面上显示.

--------------------------------------------------------------------------------------------------------------------------------------

ng-show="" 当这个值等于 true 就显示,否则就隐藏.
ng-hide="" 当这个值等于 true 就隐藏,否则就显示.

通过一个事件可以改变现实跟隐藏:      $scope.ngshow  = !ngshow;　　把他的值等于他的相反值,就可以做到 显示时点击隐藏,隐藏时点击显示

ng-repeat="x in menu" ng的数据绑定循环 一般用来显示二级菜单

var menu = [{id=1,name='一级菜单',fid=0},

                    {id=2,name='一级菜单',fid=0},

                    {id=3,name='二级菜单',fid=1},

                    {id=4,name='一级菜单',fid=2}];

<ul ng-repeat="x in menu" ng-if="x.fid == 1" ng-mouseenter="show = true" ng-mouseleave="show = false" ng-model="menu">

{{x.pName}}
　　<li ng-repeat="y in menu" ng-if="y.fid == x.id" ng-show="show" ng-model="submenu" class="{{x.pId}}">{{y.pName}}</li>
</ul>

ng-if="x.name == 0"; ng的循环跟 if 判断

angular表单验证:
form 必须有一个name{myForm}, input必须有一个name{user} 和 ng-model 还有 require="require".
一个提示信息框内绑定属性 <span myForm.user.$error.require>;

但一个按钮的值 ng-disabled="true", 他就不能被带点击

Angular.的简单运用的更多相关文章

  1. 3.2 配置构建Angular应用——简单的笔记存储应用

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  2. 3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  3. 用angular制作简单的选项卡

    现在angular变得挺火热的,自己也去简单的学习了一下,学了几天下来觉得angular果然好用,但是现在只是停留在比较浅的层面上,要想学好angular还是得下一番功夫的.学了一点新知识就想和大家分 ...

  4. gulp + angular + requirejs 简单学习

    一.安装gulp(已经安装了node环境) npm  install -g gulp 二.在package.json文件中配置依赖插件 { "name": "xxxx&q ...

  5. angular.js简单入门。

    小弟刚接触angular js  就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> ...

  6. Angular之简单的登录注册

    使用Angular实现了一个简单的登录注册的功能........ 涉及到的Angular知识点很少 主要是这个功能的实现...(*^__^*) 嘻嘻…… 里面涉及到的知识点记录: 1.本地存储的操作 ...

  7. 3.2.1 配置构建Angular应用——简单的笔记存储应用——编辑功能

    本节我们会接着上节课的内容,继续来完成使用Angular来创建简单的笔记存储应用,上一节课,我们完成了笔记的展示功能,本节课,我们来完成编辑功能. 编辑主要是两个功能:编辑现有的笔记以及创建新笔记.首 ...

  8. angular实现简单的pagination分页组件

    不想使用第三方库,只想使用一个分页器,那么就简单的实现一个,效果如下: 1.使用方式: <custom-pagination *ngIf="enterpriseList.length& ...

  9. Angular实现简单数据计算与删除

    AngularJS 1)什么是AngularJS AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. ...

随机推荐

  1. hdu 1277 全文检索 (直接映射查找 || 自动机)

    Problem - 1277 无聊做水题的时候发现的一道题目.这道题第一反应可以用自动机来解决.当然,条件是各种限制,从而导致可以用直接映射标记的方法来搜索.具体的做法就像RK算法一样,将字符串has ...

  2. CSS中的“>”是什么意思

    #quickSummary p{color:red;} #quickSummary >p+p{color:red;} #quickSummary>p+p+p{color:inherit;} ...

  3. 各种浏览器怎么换ip

    https://jingyan.baidu.com/article/e4d08ffdb784050fd2f60ddd.html 方法/步骤   1 用浏览器搜索ip,得到自己当前的ip. 2 用浏览器 ...

  4. input submit标签的高度和宽度与input text的差异

    <input type="text"> 时设置input的高度和border,最后元素的高度和宽度包含了border的值. <input type="s ...

  5. Editplus配置java编译运行环境

    1.进入配置环境界面 首先,从菜单"工具(Tools)"->"配置用户工具..."进入用户工具设置. 在类别里展开"工具"树形菜单-& ...

  6. java super关键字和调用父类构造方法

    表示父类对象的默认引用 如果子类要调用父类被覆盖的实例方法,可用super作为调用者调用父类被覆盖的实例方法. 使用super调用父类方法 使用super调用父类的构造方法 调用构造方法 本类中调用另 ...

  7. 三星s5830刷机小记

    拿起好久没用的三星s5830手机,看了看手机内存所无几,运行十分缓慢,就想着收拾下,当个备机用,在刷机前我做了个小实验,先把手机root,安装RE管理器,把system/app下的所有东西都删了,因为 ...

  8. js基础——函数

    1.函数声明:通过函数可封装任意多条语句,且可在任意地方.任何时候调用执行. eg. function box(){//无参函数      alert("只有函数被调用,我才会被执行&quo ...

  9. java 反射实现框架功能

    框架与框架要解决的核心问题 我做房子卖给用户住,由用户自己安装门窗和空调,我做的房子就是框架,用户需要使用我的框架,把门窗插入进我提供的框架中.框架与工具类有区别,工具类被用户的类调用,而框架则是调用 ...

  10. opacity兼容性以及存在问题处理

    opacity兼容性以及存在问题处理 opacity兼容性 opacity属性是CSS3的属性,用于设置元素的不透明级别.语法: opacity: value | inherit; ①值value表示 ...