ASP.NET MVC下使用AngularJs語言(一)：Hello your name

標籤：edit   配置   one   mic   一個   nbsp   event   hello   ros   

新春節後，分享第一個教程。

是教一位新朋友全新學習ASP.NET MVC下使用AngularJs語言。

一，建立一個空的Web項目。使用NuGet下載AngularJs和jQuery。
二，配置BundleConfig.cs：

public class BundleConfig    {        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862        public static void RegisterBundles(BundleCollection bundles)        {            //bundles.Add(new StyleBundle("~/bundles/css").Include(            //            "~/Content/css/angularvalidate.css"            //            ));            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(                        "~/Scripts/jquery-3.1.1.js"                        ));            bundles.Add(new ScriptBundle("~/bundles/angular").Include(               "~/Scripts/angular.js",               "~/Scripts/angular-route.js"               ));        }    }

Source Code

三，配置Global.asax。編寫Application_Start()方法，啟用上面bundles的angularjs和jQuery引用。

 

public class MvcApplication : System.Web.HttpApplication    {        protected void Application_Start()        {            AreaRegistration.RegisterAllAreas();            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);            BundleTable.EnableOptimizations = true;            BundleConfig.RegisterBundles(BundleTable.Bundles);            RouteConfig.RegisterRoutes(RouteTable.Routes);        }    }

Source Code

四，項目使用ASP.NET MVC架構Layout:

 

五，為ASP.NET MVC建立一個控制器：

 

六，在項目下，建立一個angularjs目錄，將用來儲存angularjs代碼文檔，如app或controller等。下面建立一個app.js



七，為ASP.NET MVC建立一個視圖：

上面html程式中，有使用了ng-app，ng-model和ng-bing等指令，實際說明，可以官方解釋。

下面示範一下程式運行互動情形：

 

ASP.NET MVC下使用AngularJs語言(一)：Hello your name