Angular-material not working AngularJS - javascript

http://plnkr.co/edit/Lvdl4XpReQr6AzsuOQhP?p=preview
While using angular-material getting following error : Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.4.2/$injector/unpr?p0=%24%24forceReflowProvid…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue
Routing.JS :
(function () {
var app = angular.module('angularMaterial', ['ngRoute','ngMaterial']);
app.config(function ($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: 'main.html',
controller: 'MainController'
})
.otherwise({ redirectTo: "/main" });
});
}());
Index.html : Shell for displaying html pages based on routing
<html lang="en" ng-app="angularMaterial">
<head>
<title>Angular Material Fundamentals</title>
<meta charset="utf-8" />
<link data-require="angular-material#*" data-semver="1.1.0" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" />
<script data-require="angular-material#*" data-semver="1.1.0" src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script data-require="angular-animate#*" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.js"></script>
<script data-require="angular-aria#1.5.5" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script data-require="angular-messages#1.5.5" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="routing.js"></script>
<script src="MainController.js"></script>
</head>
<body ng-cloak="">
<header>
<h1>
Angular Material Fundamentals </h1>
</header>
<div ng-view=""></div>
</body>
</html>
Main.html :
<div>
<md-content flex layout-padding>
{{message}}
</md-content>
</div>
MainController.js :
function MainController($scope) {
$scope.message = "Angular Material is a UI component library for Angular JS developers. Angular Material components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation. It helps in creating faster, beautiful, and responsive websites. It is inspired from Google Material Design.";
}
MainController.$inject = ['$scope'];
angular.module('angularMaterial').controller('MainController', MainController);
Please help.....Thanks

Angular material have a dependency on angular so you need to add angular.js first and then angular-material.min.js resource file.
The order of adding script resource should be
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script data-require="angular-material#*" data-semver="1.1.0" src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
Plunker : http://plnkr.co/edit/D8KNdE4phpxwCf6N5s4x?p=preview

Related

AngularJs ng-route not working in IE 11

I'm a beginner to AngularJs and currently working on a small test project. I found out the app perfectly working fine on Firefox but not in IE 11 and Chrome. I've been trying most of the fixes in the internet. adding meta tags and all but none of them worked for me. Here's my code.
Code
'use strict';
var app = angular.module("myApp", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/services', {
templateUrl: 'services.html',
controller: 'ServicesCtrl'
});
$routeProvider.when('/clients', {
templateUrl: 'clients.html',
controller: 'ClientsCtrl'
});
$routeProvider.otherwise({redirecTo: '/'});
}]);
app.controller('HomeCtrl', ['$scope', function($scope){
$scope.message = 'Welcome to Inspire';
}]);
app.controller('ServicesCtrl', ['$scope', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
}]);
app.controller('ClientsCtrl', ['$scope', function($scope) {
$scope.message = 'These are clients';
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<ul>
<li>
Home
</li>
<li>
Services
</li>
<li>
Clients
</li>
</ul>
<div ng-view=""></div>
</body>
</html>
I'd highly recommend you run through
Codeacademy.com
and
Udacity's front-end nano-degree(it's free if you scroll down and start on supporting courses).
https://www.udacity.com/course/front-end-web-developer-nanodegree--nd001
I see a lot of bad practice in the code snippets above and I don't recommend you start learning a framework until you feel comfortable with HTML/CSS and JavaScript.Once you do that you should then try picking up Angular.
As for your answer
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<ul>
<li>
Home
</li>
<li>
Services
</li>
<li>
Clients
</li>
</ul>
<div ng-view=""></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</body>
</html>
You'll also have to install ng-Route https://docs.angularjs.org/api/ngRoute. Check this out for details. Again please don't continue to learn Angular. You NEED to understand JavaScript and best practices before you continue with a framework.
Go through those two places I recommended and you should be okay.

How create routes in AngularJS + JavaScript?

I'm creating a website and I'm using JavaScript + AngularJS, presently I create the routes for the application, but it always returns 404 not found on the server, I've tried several examples of the internet but none of them worked, here's an example of my code, remembering that The html pages are inside the WebContent:
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index <br> home
</div>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/index", {
template: "/index.html"
})
.otherwise({
redirectTo: '/home.html'
});
});
</script>
</body>
</html>
you forgot the ng-view directive.
also,
the href need to be with a hash prefix - or using the Link directive.
the redirectTo key need to provide a view [name/address] & not a
template
if you want to use template files & not inline code use the templateUrl key
you can see an example of your code here: http://codepen.io/AceDesigns/pen/ZLXLKa
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index<br>
home
</div>
<div class="">
<ng-view></ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider){
$routeProvider
.when("/index", {template:"<div>INDEX VIEW</div>"})
.when("/home", {template:"<div>HOME VIEW</div>"})
.when("/tempFile", {templateUrl: "views/temp_file.html"})
.otherwise({redirectTo: '/home'});
});
</script>
</body>
</html>

"win-list-view" element break page in Universal windows 8.1 project with WinJS and Angular

I try simple Universal windows 8.1 project.
My default.html page:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8" />
<!-- WinJS references -->
<script src="scripts/services/winstore-jscompat.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/winjs/js/base.min.js"></script>
<script src="node_modules/winjs/js/ui.min.js"></script>
<!-- angular -->
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/angular-winjs/js/angular-winjs.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/EventsController.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Project has one simple view and simple controller. When I use "win-list-view" in my view, (even empty win-list-view without bounding) I got error which i do not understand.
HTML1300: Navigation occurred.
default.html
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
default.html
Error: [$compile:noslot] http://errors.angularjs.org/1.5.3/$compile/noslot? p0=true&p1=%3Cdiv%20class%3D%22ng-isolate-scope%22%20item-data- source%3D%22manufacturers%22%20ng-transclude%3D%22true%22%3E
...
My page is open, but data on screen are in json format. Whole data binding array is shown on screen.
View:
<div>
<win-list-view item-data-source="manufacturers">
<win-item-template>
<div>
<h4>{{item.data.title}}</h4>
<h6>{{item.data.text}}</h6>
</div>
</win-item-template>
<win-list-layout></win-list-layout>
</win-list-view>
</div>
Controller:
(function () {
angular.module("mainApp")
.controller("EventsController", function ($scope) {
$scope.manufacturers = [
{ title: "marvelous mint", text: "gelato" },
{ title: "succulent strawberry", text: "sorbet" },
];
})
}());
My app:
(function() {
angular.module("mainApp", ["ngRoute", "winjs"]);
angular.module("mainApp")
.config(function ($routeProvider) {
$routeProvider
.when("/events", {
templateUrl: "views/events.html",
controller: "EventsController"
})
.otherwise({ redirectTo: "/events" });
});
}());
Why "win-list-view" tag on view caused that error?
Work on windows 8 with VS2015, maybe it has influence.

angularjs - ngRoute not working properly

ngRoute was previously working fine and is stopped working now ater added few files and controllers.
In The browser I get URL as http://localhost/#browsefp instead of http://localhost/#/browsefp
below is my code, please help. Learning AngularJS and keep getting weird issues. No errors seen in JS console.
app.js
var app = angular.module('DevStreamApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl : 'views/main.html', controller : 'mainController' })
.when('/addnew', {templateUrl : 'views/addnew.html', controller : 'homeController', css : 'css/screen.css'})
.when('/addnewfp', {templateUrl : 'views/addnewfeeprogram.html', controller : 'homeController', css : 'css/screen.css'})
.when('/addnewcm', {templateUrl : 'views/addnewcustomermapping.html', controller : 'aboutController', css : 'css/screen.css'})
.when('/browsefp', {templateUrl : 'views/browseprogram.html', controller : 'browseprogramController', css : 'css/screen.css'})
.otherwise({ redirectTo : '/' })
});
index.html
<!doctype html>
<!-- define angular app -->
<html ng-app="DevStreamApp">
<head>
<titleFee </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
#import url("/css/screen.css");
#import url("/js/yui/container.css");
</style>
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<hr noshade/>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
Add new <br/>
Add new Fee Program<br/>
Add new Customer mapping<br/>
Browse Fee Program
<div ng-view></div>
</div>
</body>
<script src="js/app.js"></script>
<script src="js/controllers/mainController.js"></script>
<script src="js/controllers/homeController.js"></script>
<script src="js/controllers/aboutController.js"></script>
<script src="js/controllers/contactController.js"></script>
<script src="js/controllers/browseprogramController.js"></script>
</html>
mainController.js
//create the controller module
angular.module('DevStreamApp').controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come in Main Controller!';
});
Remove the # from the href, as you can see in doc they configure it as follow:
Moby
.when('/Book/:bookId', {
....
});
so in your case it would be:
Add new <br/>
Add new Fee Program<br/>
Add new Customer mapping<br/>
Browse Fee Program
By default, AngularJS will route URLs with a hashtag, but you can remove it with $locationProvider.
You will use the $locationProvider module and set html5Mode to true.
var app = angular.module('DevStreamApp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
... your code ...
And in your index.html the link must be
Add new <br/>

In Angularjs, why am I getting an "Argument 'HomeController' is not a function" error?

I'm building a cordova app and want to use angular to build out pages a the user selects content. I'm building out in the web right now before I move to cordvoa.
<!doctype html>
<html ng-app="nanoApp">
<head>
<link rel="stylesheet" href="css/main.css">
<script src="js/angular.min.js"></script>
<script src="js/ngroute.min.js"></script>
<script src="js/angular-script.js"></script>
</head>
<body>
<div id="content" class="scroller" ng-view></div>
</body>
</html>
angular-script.js:
var nanoApp = angular.module('nanoApp',['ngRoute']);
nanoApp
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'HomeController as homeSlides',
templateUrl:'../content/home.html'
});
});
home.html:
<div id="home" class="container paralax">
...
</div>
That's because you didn't define HomeController.
Try to create controller first
Like this
var nanoApp = angular.module('nanoApp',['ngRoute']);
nanoApp.controller("HomeController",["$scope",function($scope){
//put your code here
}]);

Categories