I have created an MVC project and added AngularJS-Material and all required files. I put the AngularJS App on the _Layout.cshtml page as I want to be able to display a toolbar throughout the project.
For each view I was planning on using a different controller but when I reference the controller in a new script file I get an error that says the controller is undefined.
The code below works fine and the only problems I get are when I try to add another view in the #RenderBody() section of the code. On each individual chstml file I am defining a new controller but keeping the same app.
Here is my layout file:
<!DOCTYPE html>
<html ng-app="bPST" ng-controller="layoutCtrl">
<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")
<link href="~/Content/angular-material.min.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/angular-aria.js"></script>
<script src="~/Scripts/angular-messages.js"></script>
<script src="~/Scripts/angular-material/angular-material.js"></script>
<script src="~/Ang_Scripts/bpst.js"></script>
</head>
<body>
<div layout="column" layout-fill>
<md-toolbar>
<div class="md-toolbar-tools">
<span>Title </span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-button ng-click="sideBarFunctions()">Menu</md-button>
</div>
</md-toolbar>
<md-sidenav ng-cloak class="md-sidenav-left md-whitefram-z2" md-component-id="left" md-is-open="sideBarOpen">
<div layout="column" layout-align="space-around stretch">
<md-toolbar>
<h2 style="text-align: center;">Menu</h2>
</md-toolbar>
<md-content layout-padding layout="column" layout-align="start">
</md-content>
</div>
</md-sidenav>
<md-content>
<div class="container body-content">
#RenderBody()
</div>
</md-content>
</div>
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
#Scripts.Render("~/bundles/jquery")
#*#Scripts.Render("~/bundles/bootstrap")*#
#RenderSection("scripts", required: false)
login.js:
var bApp = angular.module('bPST', ['ngMaterial']);
bApp.controller('loginCTRL',function($scope) {
$scope.message = "Login";
});
So the problem was more with the way that I was creating the application in the js file.
I was doing this.
var bPSTApp = angular.module('bPST', ['ngMaterial']);
Then creating the controller like this.
bPSTApp.controller('layoutCtrl', function ($scope) {
//Add coding here
};
when I changed it up to this, it started working.
angular.module('bPST').controller('layoutCtrl', function ($scope) {
//Add coding here
});
Now all I need to do is reference the App in each controller file instead of trying to reference the variable that I was setting in the main JS file.
Also, since I am using the login.js on the login cshtml file, it was only being referenced in that view.
I do get that AngularJS and AngularJS Material is good for Single Page Applications, but there are functions that I want to use that make my application look good and function the way I want.
Got to love newbie mistakes.
Related
I have created the website using angularjs and i have used angular-material in our website but i have properly included the script file properly but i got error after inlcude the ['ngMaterial'] as a depedency in our module i dont understand what the wrong in my code.
var app = angular.module("gupaApp", ['ngMaterial']);
app.controller("gupaContr", function($scope) {
console.log('hii');
})
<html ng-app="gupaApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.css">
<script src="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.js"></script>
<script type="text/javascript" src="app/controller/gupaController.js"></script>
<body ng-controller="gupaContr">
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<div flex="50">
<h3 class="title"><span>My Title</span></h3>
</div>
<div flex="50" layout layout-align="end center">
<md-button class="md-fab" aria-label="Time">
<md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
</div>
</div>
</md-toolbar>
</body>
</html>
You need to add references to the angular-animate.js and angular-aria.js aswell
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script>
Make sure to match the version you're using
PLUNKER DEMO
I am planning to use AngularJS 1.x version with Angular Material design.
While I was searching for articles I came up with below two URL. First one is what I am using for Angular 1.x. If I am not wrong then the second one is for Angular 2.x and higher version. Hope someone can put more light on this.
https://material.angularjs.org
https://material.angular.io
Yes you are right! In order to setup your app with angularjs use the first one
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.todos = [];
for (var i = 0; i < 45; i++) {
$scope.todos.push({
face: 'https://avatars0.githubusercontent.com/u/598463?v=3&s=60',
what: "Brunch this weekend?",
who: "Markus Thiel",
notes: "I'll be in your neighborhood doing errands."
});
}
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl" layout="column">
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<div flex="50">
<h3 class="title"><span>My Title</span></h3>
</div>
<div flex="50" layout layout-align="end center">
<md-button class="md-fab" aria-label="Time">
<md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
</div>
</div>
</md-toolbar>
<md-content layout-fill>
<md-list>
<md-item ng-repeat="item in todos">
<md-item-content>
<div class="md-tile-left">
<img ng-src="{{item.face}}" alt="{{item.who}}" class="face">
</div>
<div class="md-tile-content">
<h3>{{item.what}}</h3>
<h4>{{item.who}}</h4>
<p>{{item.notes}}</p>
</div>
</md-item-content>
<md-divider inset></md-divider>
</md-item>
</md-list>
</md-content>
</body>
</html>
While the 2nd url is for angular and angular4 you can install the necessary modules with the command npm install and import the modules in your angular application.
# install Angular Material 2 components
npm install --save #angular2-material/{core,button,card}
I wonder why my md-datepicker is not showing up. I have this html code in the partial html.
<div ng-if="question.QuestionTypeId == 4" class="row text-left options" style="">
<md-datepicker ng-model="foo" md-placeholder="Enter date" ng-change="Test(question)"></md-datepicker>
</div>
I have the following libs references
<script src="~/App/Apps/fnncialQsApp.js"></script>
<script src="~/App/Services/userDataRepo.js"></script>
<script src="~/App/Controllers/fnncialQsCtrl.js"></script>
<script src="~/Scripts/angular/angular-messages.min.js"></script>
<script src="~/Scripts/angular/angular-animate.min.js"></script>
<script src="~/Scripts/angular/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
<div ng-app="userFinancialData" class="container">
<div ng-view></div>
</div>
As the image shown. Only a small hidden square element was displayed.
You need to add 'ngMaterial' while you initiate the angular module. Given the all other dependent java script files are imported into file, using CDN link or local copy.
Code would look like :
angular.module("CustomerManagement", ['ngMaterial']);
We are attempting to create a MVC/AngularJS mini-SPA site using various links found on tutorial sites and others like: AngularJS routing in MVC application with templates. However, clicking on the links appear to load the whole page every time, and the templates are never loaded. I am sure I'm missing something simple, but can't figure it out.
My _Layout.cshtml looks like:
<!DOCTYPE html>
<html ng-app="registrationModule">
<head>
<meta charset=" utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-resource.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/GrextScripts/registration-module.js"></script>
<script src="~/GrextScripts/user-repository.js"></script>
<script src="~/GrextScripts/user-controller.js"></script>
#RenderSection("SectionInHeader", required: false)
</head>
<body>
<header>
<div class=" content-wrapper">
<div class="float-left">
<p class="site-title">
GREXT
</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>Users</li>
</ul>
</nav>
</div>
</div>
</header>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
The ControlPanel/Index.cshtml (the {{5+5}} renders properly as a "10" on the page, this was just to see if the AngularJS was working
#{
}
<div ng-view>
{{5+5}}
</div>
registration-module.js
var registrationModule = angular.module("registrationModule", ["ngRoute", "ngResource"])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/ControlPanel/Users", {
templateUrl: "/templates/users/all.html",
controller: "userController"
});
$locationProvider.html5Mode(true);
});
user-controller.js
registrationModule.controller("UserController", function($scope, userRepository, $location) {
$scope.users = userRepository.get();
});
And last, the template: /templates/users/all.html
{{1+1}}
<table>
<tr><td>User Name</td></tr>
<tr ng-repeat="user in users">
<td>{{user.UserName}}</td>
</tr>
</table>
As mentioned, when I click on the Users link in the page, the whole page reloads and the template all.html is not loaded as I expect it.
#aaronfrost's comment made me re-check my javascript console more thoroughly and found that I need to include a
<base href="/" />
in the < head> tag of my document. Adding this causes everything to work.
Not sure, but the problem may be that you declared the controller as "UserController" with a capital "U", but in the routeProvider you specified it with a lowercase "u" as "userController".
I am guessing that you have an error in the console, so you might want to check there.
Change the routeProvider to use "UserController" instead of "userController" and it should work.
So, I'm trying to get angularjs working with KendoUI mobile...hybrid mobile app.
HTML:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="kendo/styles/kendo.flat.mobile.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ngApp.js"></script>
</head>
<body>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
</div>
</div>
<!-- application views will be rendered here -->
</div>
<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<ul data-role="listview">
<li>
Home
</li>
<li>
Settings
</li>
<li>
Contacts
</li>
</ul>
</div>
AngularJS:
(function () {
var ngApp = angular.module("MyApp", ["kendo.directives"]);
ngApp.controller('HomeController', ['$scope', function ($scope) {
$scope.foo = 'something';
alert("HOME CONTROLLER");
}]);
}());
Part View HTML:
<div data-role="view" data-title="AskLaw" data-layout="main" data-model="APP.models.home" ng-controller="HomeController">
<h1 data-bind="html: title"></h1>
<span>{{foo}}</span>
</div>
What I'm thinking "should" happen is the ng-controller="HomeController" should cause the HomeController to fire and populate the $scope.foo variable. This should bind to the {{foo}} on the view page as well as show the alert...not happenin'.
Any ideas?
Kendo UI developer here, the Kendo UI mobile application and AngularJS do not work well together currently. The good news is that this is something we are actually working on right now - it will be released in our upcoming 2014 Q3 release, due November.
The Telerik resource linked here should be helpful to devs looking to optimally integrate AngularJS functionality into Kendo UI Mobile: http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial