您的位置：首页 > Web前端 > AngularJS

angularJs+MVC+C#学习（二）

2016-07-15 21:48 429 查看
**

angularJs+MVC+C#学习（二）

**

在前面，我们可以在MVC中运行angularJS的代码，同时也看看了效果，但是这样写还是远远不够的，我们得学会angularJS中是怎么使用controller和route的。我们先来看看如果使用controller

接下来的步骤要保证angularJS+mvc+C#学习（一）中的步骤你是成功了的，不然下面的代码是没有任何作用的。

第一步：在Scripts文件夹新建一个Controllers文件夹以及AngularMVCApp.js文件。（Controllers的文件夹名不是一定的，看个人的习惯，只要你明白是什么意思就可以了。）

在Controllers下新建一个js文件，LandingPageController.js（命名由自己定）。在文件里面写入：

var LandingPageController = function ($scope) {
$scope.models = {
helloAngular: 'I work!'
};
}
LandingPageController.$inject = ['$scope'];


然后在AngularMVCApp.js中写入：

var AngularMVCApp = angular.module('AngularMVCApp', []);
AngularMVCApp.controller('LandingPageController', LandingPageController);


第二步：修改Home下面的index.chtml界面

<!DOCTYPE html>
<html ng-app="AngularMVCApp" ng-controller="LandingPageController">
<head>
<title ng-bind="models.helloAngular"></title>
</head>
<body>
<input type="text" ng-model="models.helloAngular" />
<h1>{{models.helloAngular}}</h1>
<script src="~/Scripts/angular.js"></script>
@Scripts.Render("~/bundles/AngularMVCApp")
</body>
</html>


运行程序就可以看见效果了。

注意：

<html ng-app="AngularMVCApp" ng-controller="LandingPageController">


中ng-app要保证和你新建的AngularMVCApp.JS的文件名一致

ng-controller要保证和你在Controllers文件夹下新建的文件名保证一致。不然angularJS会识别不了你绑定的文件是哪一个。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  mvc angularjs
相关文章推荐
新的分享
章节导航