初识angularjs应该知道些什么？2018angularjs的入门必学教程（附实例讲解）

本篇文章介绍的是angularjs的基础认识，让想学angularjs的同学有个好点的入门课程。现在就让我们一起来看看这篇文章吧。

AngularJS介绍

angularjs是一个前台框架，使用javascript编写的库。用户可以在使用该框架，在前台中进行数据双向绑定，实现前端的mvc数据显示。 

　　在使用AngularJs框架的时候，只需要在前台的html中引入AngularJs文件即可。使用非常方便。

AngularJs基础操作

　　在讲解基础指令前，先普遍一些基础概念。用户在页面中引入AngularJs文件后，可以创建WebApp和控制器了。在 AngularJs 中，每个页面被看作一个独立的 WebApp，每个 WebApp 中可以包括多个独立的处理部分，我们称为 Controller，每个 Controller 有自己独立的处理上下文和逻辑。AngularJs 通过指令 ng-app 来划定这个 WebApp 的作用域，通常可以将这个 ng-app 直接写在 html 标记之上，也可以写在一个元素之上。例如： 　

html:

    

    
{{data}}
    

初始化应用程序： ng-app 指令告诉 AngularJS，

元素是 AngularJS 应用程序 的”所有者”。
绑定数据： ng-model 指令把输入域的值绑定到应用程序变量 name。———绑定到属性中。也可以：为应用程序数据提供类型验证（number、email、required）。为应用程序数据提供状态（invalid、dirty、touched、error）。为 HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单。
绑定html中的数据： ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。等价于在html中写{{变量名}}—————-绑定到text中
初始化数据： ng-init 指令初始化 AngularJS 应用程序变量。
克隆数据： ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。eg:ng-repeat=”x in arrays”
自定义指令： 通过使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive。

eg:
    
    

控制器： ng-controller 指令定义了应用程序控制器。
过滤器： 过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
service： AngularJS 中你可以创建自己的服务，或使用内建服务。服务是一个函数或对象，可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。下面介绍几个常用的内建服务。（想看更多就到PHP中文网AngularJS开发手册中学习）

1，$location:类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。2，$http:AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。3,$timeout:AngularJS $timeout 服务对应了 JS window.setTimeout 函数。4,$interval:AngularJS $timeout 服务对应了 JS window.setInterval  函数。5,用户可以根据自己的需求来创建自定义服务。

http:       ａngularJS 中的一个核心服务，用于读取远程服务器的数据。注意v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代

格式：/ 简单的 GET 请求，可以改为 POST$http({
    method: 'GET',
    url: '/someUrl'}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码});

选择框（select）：AngularJS 可以使用数组或对象创建一个下拉列表选项。

1,使用ng-options来创建一个对象

    
    
2,使用ng-repeat来创建对象，
    {{x}}3,区别：ng-options，选择的值是一个对象：也就是当select获取值selectedSite时候，得到的是一个对象。ng-repeat，选择的值是一个字符串:也就是当select获取值selectedSite时候，得到的是一个字符串

表格： AngularJs中的ng-repeat 指令可以完美的显示表格。也可以在表格进行显示的时候，使用过滤器。

 
    
//显示序号        

      

        
{{ $index + 1 }}
{{ x.Name }}
        
{{ x.Country }}
      
    

HTML DOM： AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
　　1,ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
　　2,ng-show 指令隐藏或显示一个 HTML 元素。ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。你可以使用表达式来计算布尔值（ true 或 false）:
　　3,ng-hide 指令用于隐藏或显示 HTML 元素。注意在页面中如果使用input type=hidden来做表单传值的时候，是不支持的。
　　4,ng-click 指令定义了 AngularJS 点击事件。
模块： 模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。
注意： 对于 HTML 应用程序，通常建议把所有的脚本都放置在  元素的最底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的  区域被加载。在我们的实例中，AngularJS 在  元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。另一个解决方案是在  元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
表单： AngularJS 表单是输入控件的集合。
　　1,Input 控件使用 ng-model 指令来实现数据绑定。
　　2,checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中。举个例子：

笔魂AI

笔魂AI绘画-在线AI绘画、AI画图、AI设计工具软件

下载

    

        
职业:            工程师            设计师            教师        
        
        
    

　　3,radio：我们可以使用 ng-model 来绑定单选按钮到你的应用中。单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。
　　4,下拉菜单上面已经写过。在此不再复述。
输入验证：　AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

    
用户名:

      
      
      用户名是必须的。
      
    
    

      
invalid 都为 true 时才显示。
属性  　描述$dirty 表单有填写记录$valid 字段内容合法的$invalid   字段内容是非法的$pristine  表单没有填写记录
API：　AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：比较对象,迭代对象,转换对象,全局 API 函数使用 angular 对象进行访问。 
以下列出了一些通用的 API 函数：
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString()  判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()  判断给定的对象是否为数字，如果是返回 true。
注意点： 
1，HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。 
2，类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。 
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。AngularJS 表达式不支持条件判断，循环及异常。AngularJS 表达式支持过滤器。
好了，本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。