Hi,
I am new to MVC4 and to angular.js. I created a MVC application and included the angular.js as below
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js"));
and then included the below
@Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/angular")
Now when i look at the index page (the default template) the css are not displaying proper.
which css framework are you using, and did you include it? (mvc currently defaults to bootstrap).
Hi,
Need to clarify or to be considered:
- what is index page you mean? It can be index.html that you create your self, or index.cshtml that auto generated when create a controller with EF
- If you use index.html on root folder, you need to manually insert script statement to include angularJS and other scripts
- Bundling is used on .cshtml and you need to add your new bundle into default master page on shared folder named _Layout.cshtml to share with other .cshtml or add to a .cshtml for individual purposes
Hope this can help
Hi,
I am using the default Index.cshtml. I have not included any additional stylesheet like bootstrap or others. I was just trying to display "HelloWorld" from Angular controller in the Index.cshtml. I could see my results but the default Index.cshtml stylesheet
was not getting applied.
As mentioned above i included the reference in the BundleConfig
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js")); and included scripts.Render section in the _Layout.cshtml.
ScriptBundle is used for javascripts. For CSS you need to use StyleBundle. Here is my bundle configuration for a typicaly angular application
14 bundles.Add( 15 new ScriptBundle("~/scripts/libraries") 16 .Include("~/scripts/angular/angular.js") 17 .Include("~/scripts/angular/angular-route.js") 18 .Include("~/scripts/angular/angular-resource.js") 19 .Include("~/scripts/bootstrap.js") 20 .Include("~/scripts/jquery.js") 21 .Include("~/scripts/kendo/kendo.ui.core.js") 22 ); 23 24 //including all the css used in our app 25 bundles.Add( 26 new StyleBundle("~/content/css") 27 .Include("~/content/bootstrap/bootstrap.css") 28 .Include("~/content/bootstrap/bootstrap-theme.css") 29 .Include("~/content/kendo/kendo.common.css") 30 .Include("~/content/kendo/kendo.blueopal.css") 31 .Include("~/content/app.css") 32 ); 33 34 //including the javascript files in our app 35 bundles.Add( 36 new ScriptBundle("~/scripts/app") 37 .Include("~/app/app.js") 38 .IncludeDirectory("~/app", "*.js", true) 39 );
If you are interested, please take a look at my style guide at my github site
https://github.com/prasannapattam/ng-demos/tree/master/ng-demos/ng-styleguide
Hi,
Now your case is clear.
First "angular.js" is working improperly when we bundle it. Instead, we can use the minified one directly and can be inserted in _Layout.cshtml or Index.cshtml. Only "angular.js" or "angular.min.js" that can not be bundled. There is no problem to bundle
other angular.*.js in my project so far. This is from my experiences.
Here the sample that I have tested:
_Layout.cshtml inserted three line from the last:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> @Html.Partial("_LoginPartial") </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - My ASP.NET Application</p> </footer> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) <script src="~/Scripts/angular.min.js"></script> </body> </html>
And here my test Index.cshtml:
<div class="row" ng-app> <div class="col-md-4"> <input type="text" ng-model="name" placeholder="Enter your name" /> </div> <div class="col-md-4"> <h2>{{name}}</h2> </div> <div class="col-md-4"> <h2>{{name}}</h2> </div> </div>
Please remove your angular.js bundling.
Have fun.
Hi Mrityunjay08,
What do you mean “I could see my results but the default Index.cshtml stylesheet was not getting applied”?
The AnhularJS redefines how to build front-end applications. If you want to apply the style to the element, you need add the corresponding style files to the view.
Base on my test, the AngularJS works fine. This is my code below:
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js"));
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/angular") @RenderSection("scripts", required: false)
<div ng-app> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <h1>Hello, {{ yourName }}!</h1> </div>
There are some articles about AngularJS that can help you:
# How to get started (Part 1 of the AngularJS – from beginner to expert in 7 steps series)
http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html
# A Step-by-Step Guide to Your First AngularJS App
http://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app
Best Regards
Starain Chen