Using AngularJS-01 in MVC, the basic

Angularjs is a front-end JavaScript MVC Library and framework that enables better design, maintenance, and testing of the front end. Its core features are: MVC, bidirectional data binding, directives and semantic tagging, modular tools, dependency injection, HTML templates, and encapsulation of common tools such as $http, $cookies, $location, and more. This article experiences the basic use of angularjs in MVC.

With NuGet, enter the keyword angularjs and install "Angular JS Core".

Introduce angular.js to the page:

<script src="~/scripts/angular.js"></script>

NG-APP directive

When angular finds an element in the DOM that contains the NG-APP directive, it is initialized and can invoke other instructions from angular.

"Viewport"Content="Width=device-width"/> <title>Index</title> <script src="~/scripts/angular.js"></script> <script src="~/scripts/controller.js"></script> <link href="~/content/bootstrap.css"Rel="stylesheet"/>Ten+2={{Ten+2}}    </div> </body>

Using the "ng-model" directive for data two-way binding
<div>        <input type="text" placeholder=" Enter name" Ng-model="name"/>        {{name}}    </div>

by ng-model= "name", input and page display are implemented in two-way binding.
Using the "ng-controller" directive to introduce a controller
Enter the keyword bootstrap in nuget and install the bootstrap under MVC4.
Introduce bootstrap.cs into the view page.
Create Controller.js as follows:
varMaincontroller =function ($scope) {varModel ={Name:"My Books", Books: [{Title:'the day when the sun is on the bad', Iscomplete:false}, {Title:'those years', Iscomplete:false}, {Title:'time is for waste.', Iscomplete:true }        ]    }; $scope. Readinglist=model;};
Introduce controller.js into the view page. Home/index.cshtml as follows:
"Viewport"Content="Width=device-width"/> <title>Index</title> <script src="~/scripts/angular.js"></script> <script src="~/scripts/controller.js"></script> <link href="~/content/bootstrap.css"Rel="stylesheet"/>"Maincontroller"Reading list for > <div> class="table table-bordered table-condensed"> <thead> <tr> <th> title </th>                <th> whether to complete reading </th> <th></th> </tr> </thead> <tbody> <tr ng-repeat="Book in readinglist.books"> <td>{{book. Title}}</td> <td>{{book.isComplete}}</td> <td><in Put type="checkbox"Ng-model="Book.iscomplete"/></td> </tr> </tbody> </table> </div&gt    ; </div></body>
Run:
When you change the tick status of the checkbox, the Iscomplete value is also switched between true and false, which reflects the bidirectional binding of Angularjs.
Filter for filtering function
Add an input:
<div>            <input type="text" ng-model="titlefilter" placeholder=" input keyword search "/>        </div>
with "|" , add a filter to each line:
<tr ng-repeat="book inreadinglist.books | Filter:titlefilter">
Run, enter keywords:
Binding events for DOM elements using the "ng-click" directive
Add the following in Controller.js:
$scope. Addbook = function () {        false  });         "' ;    };
Add the following in the <div ng-controller= "Maincontroller" >:
<div> <input type="text"Ng-model="Newtitle"Placeholder="Enter a new title"Required> <input type="Button"ng-click="Addbook ()"Value="Add" class="btn"/> </div>
Run, add data:
Choose to use Angularjs or knockout?
Angular has assumed more service-side work than knockout, if the framework used is lightweight, such as Nodejs, preferring to use angular.
If the selected frame is ASP. NET, prefer to use knockout.