angularJs+MVC+C#学习(二)

**

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界面


<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)