AngularJS入门级教程(非诚勿扰)_js非诚勿扰上机练习-CSDN博客

本文链接：https://blog.csdn.net/manong1hao/article/details/70821191

简介 ：AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

首先，需要清楚AngularJS的几个最基础的指令，ng-app( 定义一个 AngularJS 应用程序。是AngularJS应用程序运行的入口) ,ng-controller(定义应用的控制器对象，将一个标签和控制器进行绑定，控制器中的数据，就可以使用在这个标签的内部了），ng-model(用来将表单元素的数据和变量双向绑定 ),和ng-bind(指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。单向绑定的)。

这样我们就可以在HTML中引进 AngularJS的指令了，第一步就是在<html>中引进ng-app,列如<html ng-app或者ng-app=“模块名”>，第二步把 Angular库引进来，第三步在<script>中定义模块和控制器，列如：

<script>
	/定义一个Angular模块/
	var app = angular.module("myApp", []); 两个参数，第一个模块名，第二个参数是所依赖的模块（初学者先不用填）

	app.controller("myCtrl", function($scope){ 定义一个控制器，用来挂在数据 $scope参数用来定义变量的
	$scope.hello = "hello angularjs！今天开始，要进行JS高级开发部分"
	});
	</script>

第四步，就是在标签中添加了，

<body>
	<!-- 将一个标签和控制器进行绑定，控制器中的数据，就可以使用在这个标签的内部了-->
	<div ng-controller="myCtrl">
	<!-- ng-model用来将表单元素的数据和变量双向绑定 -->
	<input type="text" ng-model="hello">
	<!-- 双大括号中，可以直接写变量名称，和变量的数据绑定，变量的数据发生改变，页面的数据会同时改变 -->
	{{hello}}
</body>	</div>