这篇文章介绍的内容是关于angularjs基础入门介绍，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下。
关键点：
前端JS框架：封装了使用JS开发前端重复功能，扩展了HTML，主要用于页面操作和显示。
核心：MVC、模块化、双向数据绑定、依赖注入、语义化标签、表达式等。【相关视频教程推荐：angularjs视频教程】
双向数据绑定
引入相关js文件
nbsp;html>
{{username}}
登录后复制
ng-app=””匿名应用模块，一般要写名字，便于后面初始化
ng-model:自动绑定表单元素的value的值到Angularjs内部变量中。
ng-bind:作用等同于表达式，但用法不同。一般用于绑定非表单元素，用来显示变量的。
ng-bind和{{}}区别：前者会将标签的子标签的所有内容替换为变量的内容，后者只是在当前位置显示变量的内容。
基于模块化的MVC(MVVM)
视图：主要指HTML静态页面数据标签，主要是用来显示。
模型：主要只填充视图的、逻辑处理的一些数据。比如json、变量
控制：一些js代码，编写逻辑。主要是获取模型、填充视图、从视图获取数据、填充模型。
m和vm的转换：
比如变量：
var username=”XiaoQi”;$scope.username=username;
登录后复制
vm的变量其实就是绑定到全局变量$scope中属性。
页面上：{{username}}
注意：Angularjs变量在页面上不能加$scope。
如果是定时器等内部js改变了变量，那么默认情况下Angularjs不能实现双向数据的绑定显示，需要使用$.digest强制通知（刷新）
页面打开时初始化内容示例:
nbsp;html><!-- -->
{{username}}
//初始化应用模块 //参数1：应用模块的名字 //参数2：使用扩展模块，这里没有 var myApp=angular.module("myApp",[]); //初始化控制器：认为控制器绑定了一堆js //参数1：控制器的名字 //参数2：js函数 myApp.controller("myCtrl",["$scope",function ($scope) { //初始化变量 $scope.username="XiaoQi"; //可以写任何的js }]);
登录后复制
注意：
如果定义了有名字的应用模块和控制器，那么必须使用js初始化它！
依赖注入DI
按钮事件绑定
nbsp;html>
Hello {{username}}
//初始化应用模块 var myApp=angular.module("myApp",[]); //初始化控制器 myApp.controller("myCtrl",["$scope",function($scope){ //初始化一个angularjs的事件 $scope.clearMsg=function(){ //清空数据 $scope.username=""; }; }]);
登录后复制
重复遍历
nbsp;html>
登录后复制
序号商品编号
商品名称
商品价格
{{$index+1}} {{product.id}} {{product.name}} {{product.price}} angular.module(“myApp”,[]) .controller(“myCtrl”,[“$scope”,function($scope){ //json数组 $scope.products=[ {“id”:1001,”name”:”电视机”,”price”:998}, {“id”:1002,”name”:”洗衣机”,”price”:988898} ]; }])
product：随便写，每次遍历时的临时angularjs的对象，这里指每一个json对象。
路由机制
之前：include包含页面，只是复用页面，但复用后的页面也是整体刷新的。
通过angularjs的路由，可以实现，部分刷新，实现重复的头和尾可以不刷新。而且多视图单页面效果。
底层实现：通过html中#（锚点）来实现的。
官方例子：
写法：url+#+子路径（要在中间显示的）
引入路由模块：
登录后复制
nbsp;html>
===========我是头
首页 电脑分类 财务管理==========我是脚
angular.module("myApp",['ngRoute']) //angularjs的配置，在配置中配置路由内容 .config(['$routeProvider', function($routeProvider){ $routeProvider //template中支持html标签 .when('/',{template:'这是首页页面'}) //.when('/computer',{template:'这是电脑分类页面'}) .when('/computer',{templateUrl:'computer.html'}) .when('/money',{template:'这是财务页面'}) //如果都匹配不上，则跳转到一个页面 .otherwise({redirectTo:'/'}); }]);
登录后复制
ng-view:用来显示路由的结果的内容
when:判断语句
template:html的结果,支持html标签
templateUrl:支持加载另外的页面
相关推荐：
AngularJS所有版本下载
AngularJS学习总结
angularjs和angular4的区别。为什么使用angular4
angular入门教程
以上就是AngularJS基础入门介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2769676.html
