AngularJs学习笔记1——入门知识

1.什么是AngularJs

         AngularJs 诞生于2009年,由Misko Hevery 等人创建,后被Google收购,是一个优秀的Js框架,用于SPA(single page application)适用于以数据操作比较频繁的应用程序。

2.AngularJs的四大特性

  ①采用MVC设计模式

  ②双向数据绑定

  ③依赖注入

  ④模块化设计

  主要从这四个特性出发学习AngularJs的应用。但是前提是要先明白AngularJs的表达式和指令,不先学变量,怎么去写函数。

3.表达式和指令

  3.1 准备工作

    在开始学习之前,先下载AngularJs的框架,我现在学习的是1.4版本,尽管2版本已经出来了,但是1.4的版本还是有许多人在用的。下载完成后,在页面中<head>标签中引用。同时,这里需要提前学习一下两个指令:ng-app 和 ng-init

    ng-app:①指定作用范围②自动载入并启动ng,用在html或者body标签。ng-app只识别第一个,所以一般放在body或者html中,即:     

<html ng-app>

    ng-init :初始化变量

<div ng-init="a=3"></div>

  3.2 表达式

    表达式的语法:{{表达式}}

    作用:在当前位置输出当前表单时结果

<p>{{3+4}}</p>

  如果你已经引入angular.js文件,并设置html或body为ng-app,那么在页面中会计算表达式的值,输出7

  3.3指令

    AngularJS 通过被称为 指令 的新属性来扩展 HTML,通过内置的指令来为应用添加功能, 允许你自定义指令(后面会学习)。

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-

    常用的指令:ngApp、ngRepeat、ngIf、ngShow、ngHide、ngClick、ngChecked、ngDisabled、ngSrc等等。

    常用指令的几个注意事项:

      1)    ng-bind指令:用来将表达式的值输出到当前元素的innerHTML中,如果说出现闪动情况时(ng-init)用,但一般不用

      2)    no-repeat:循环,把no-repeat放在哪个标签里,就重复哪个标签。如果是对象时,可以写成(key,value) in list

        如左图,循环输出一个数组的值到列表中,右图为结果

       

        但是当数组中有重复的数字时,这种方法就会报错了,如下:

             

        通过track by $index 方法输出重复变量,如下:

    3)    ng-if:判断表达式的值,为true时显示在DOM树上,为false时不显示

 

  

  

时间: 2024-10-26 06:21:04

AngularJs学习笔记1——入门知识的相关文章

angularjs学习笔记--1.入门

AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:<script src="angular.js"></script> AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML. AngularJS 扩展了 HTML AngularJS 通过 ng-directives 扩展了 HT

现代C++学习笔记之一入门篇:智能指针(C++ 11)

原始指针:通过new建立的*指针 智能指针:通过智能指针关键字(unique_ptr, shared_ptr ,weak_ptr)建立的指针 在现代 C++ 编程中,标准库包含智能指针,该指针用于确保程序不存在内存和资源泄漏且是异常安全的. 在现代 C++ 中,原始指针仅用于范围有限的小代码块.循环或者性能至关重要且不会混淆所有权的 Helper 函数中. 1 void UseRawPointer() 2 { 3 // Using a raw pointer -- not recommended

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

C#学习笔记(基础知识回顾)之值类型与引用类型转换(装箱和拆箱)

一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字节的值,该如何在它上面调用方法? 二:值类型转换为引用类型--装箱 2.1CLR对值类型进行装箱时:新分配托管堆内存,将值类型的实例字段拷贝到新分配的内存中,返回托管堆中新分配对象的地址.这个地址就是一个指向对象的引用. int i = 10; Object obj = i; 三:将引用类型转换为值

[Golong]学习笔记(一) 基础知识

Go编程基础 Go的内置关键字(25个) 不多 break default func interface select case defer go map struct chan else goto package switch const fallthrough if range type continute for import return var Go的注释方法(和js一样) 单行注释: // 多行注释: /**/ Go程序一般结构 common_structure.go 通过 pack

springmvc学习笔记(5)-入门程序小结

springmvc学习笔记(5)-入门程序小结 springmvc学习笔记5-入门程序小结 入门程序配置小结 非注解的完整的配置文件 注解的完整配置文件 通过入门程序理解springmvc前端控制器.处理器映射器.处理器适配器.视图解析器用法.并附上入门程序的非注解的完整的配置文件,注解的完整配置文件. 入门程序配置小结 前端控制器配置: 第一种:*.action,访问以.action结尾 由DispatcherServlet进行解析 第二种:/,所以访问的地址都由DispatcherServl

angularjs 学习笔记(一) -----JSONP跨站访问

1.  下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中. 2.  制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代). 3.  backmockup站点添加以下HTTP头 Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:origin,x-req

angularjs 学习笔记 -----结构定义

1.  Module使用方法 var APP =angular.module('fontApp',['ngResource', 'ngRoute', 'ngSanitize']); APP为定义的别名,之后的调用都应尽量使用该别名 'fontApp' ng-app="fontApp" 新版本angular中route被分离出来,各个被使用的Providerdou需要在此处声明. 大型应用应该拆分模块来做,先定义一个服务模块,然后再加载它 angular.module('xmpl.ser

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5