angular学习

最新推荐文章于 2023-06-21 17:02:39 发布

xiao_chun5316

最新推荐文章于 2023-06-21 17:02:39 发布

阅读量282

点赞数

分类专栏：学习总结文章标签： angular

本文链接：https://blog.csdn.net/xiao_chun5316/article/details/50166897

版权

学习总结专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最近学习angular,简单总结下

1. ng-app：声明angular的边界

<html ng-app=“myApp”> 这样就是告知angular去管理整个页面的内容

<div ng-app=“myApp”> 用angular管理某一部分的代码

需要在script中写好对应的angular app

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

通过 app.controller实现其他功能

2. MVC

view就是html实现的，里面的内容可以用{{}}双花括号插值语法

controller 就是我们写的js中的function，需要参数：$scope ，告知angular这个模型中都有哪些对象和基本数据。

一般在html的tag中注明：<div ng-controller='myCon'>

model 一般我们会在controller里加入model，一般通过，$scope.message={}，把内容赋给message即可。

代码示例：

<div ng-app="myApp" ng-controller="MyController">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
    $scope.firstName = "Max";
    $scope.lastName = "Chart";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>