I am creating an Angular App,
var app = angular.module("myApp", ["ngRoute","ngMaterial","ngMessages"]);
When i am using 'ngMessages' with 'ngMaterial', it is not working.
Make sure you have loaded them in the references with the correct versions ,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs//1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="app.js"></script>
DEMO
Related
I am following the phoneCat tutorial[https://docs.angularjs.org/tutorial/] and decide to create a similar structured app. but I keep getting $injector:modulerr Error when I try to include a module I created.
files are arranged like this
The way I started my app is use npm package http-sever with command http-server ...\app.
Another thing I noticed is that if I use http-server command directly(rather than npm start suggested in tutorial) to start app in the app folder it also gives me error message. I am now pretty confused about this.
This is my app.module.js
'use strict';
angular.module('dota2Hero', [
'ngRoute',
'core'
]);
If I remove 'core' from dependency array, the code compiles.
Here is my index.html
<!doctype html>
<html lang="en" ng-app="dota2Hero">
<head>
<meta charset="utf-8">
<title>Dota2 Database</title>
<script src="//code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="core/hero/hero.module.js"></script>
<script src="core/core.module.js"></script>
<script src="app.module.js"></script>
<script src="core/hero/hero.service.js"></script>
<script src="app.config.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
and my core.module.js
'use strict';
angular.module('core',['core.hero']);
You need to change the order in which you load the references, load the core.module.js before loading app.module.js
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.1/angular-resource.min.js"></script>
<script src="core/hero/hero.module.js"></script>
<script src="hero-grid/hero-grid.module.js"></script>
<script src="core/core.module.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="core/hero/hero.service.js"></script>
<script src="hero-grid/hero-grid.component.js"></script>
I am trying to learn how to use AngularJS and AngularJS Material using following codes:
<!doctype html>
<html lang="en">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
<!-- default themes and core styles -->
<link rel="stylesheet"
href="bower_components/angular-material/angular-material.css">
</head>
<body ng-app="F1FeederApp">
<md-content>
<md-toolbar class="md-tall md-accent">
<h2 class="md-toolbar-tools">
<span>Toolbar: tall (md-accent)</span>
</h2>
</md-toolbar>
<ng-view></ng-view>
</md-content>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
However, the Material is not displayed. What could be wrong with my code?
Console in Browser doesn't give me any error.
Just tried your code and it works fine on Chrome, FireFox, and Safari.
By the way, you have an extra ; before your closing script tag
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
I recommend you to check your angular and angular material versions,
or check if there is a problem in your .js files.
Hi all i am working on angularJS app. Everything is fine but I have only one issue. I have to link and load(as dependency) in my app. That's why i have this kind of code
<script src="shared.js"></script>
<script src="user.js"></script>
<script src="home.js"></script>
<script src="product.js"></script>
<script src="comment.js"></script>
<script src="address.js"></script>
<script src="cities.js"></script>
<script src="phone.js"></script>
<script src="review.js"></script>
<script src="configs.js"></script>
<script src="app.js"></script>
And In app.js i have these app dependies
'mainApp.shareModule',
'mainApp.userModule',
'mainApp.homeModule',
'mainApp.commentModule',
'mainApp.addressModule',
'mainApp.citiesModule',
'mainApp.phoneModule',
'mainApp.reviewModule',
'mainApp.productModule'
Is there any solution like (lazy loading) but my understanding is about lazy loading is then i have to design all modules independent.
Thank you.
Here is my test file for testing the IndexController
//modules/application/tests/spec/controllers/IndexController.js
'use strict';
(function() {
describe('Application IndexController', function() {
beforeEach(function() {
module('HtEwa');
module('HtEwa.Application');
});
var scope, IndexController;
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
IndexController = $controller('IndexController', {
$scope: scope
});
}));
it('should expose global scope', function() {
expect(scope.global).toBeTruthy();
});
});
})();
I have seen other answers but it is not working for me. And I have the files included in my karma.conf.js is:
files:_.flatten(_.values(assets.core.js)).concat([
'modules/*/*.js',
'modules/*/*/*.js',
'modules/*/tests/spec/*/*.js'
]);
I have HtEwa and HtEwa.Application module. Under the HtEwa.Application there is IndexController.
//modules/application/controllers/IndexController.js
'use strict';
angular.module('HtEwa.Application').controller('IndexController', ['$scope', 'Global',
function($scope, Global) {
$scope.global = Global;
}
]);
I guess that my IndexController file is not included, but I have included modules/*/*/*.js in my karma.conf.js and that's where the IndexController is.Or Am I missing anything?
Edit:
And the karma --log-level debug shows that all files that are needed is served.
Here are the included files that i watched from chrome
<!-- Dynamically replaced with <script> tags -->
<script type="text/javascript" src="/base/node_modules/karma-jasmine/lib/jasmine.js"></script>
<script type="text/javascript" src="/base/node_modules/karma-jasmine/lib/adapter.js"></script>
<script type="text/javascript" src="/base/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/base/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-mocks/angular-mocks.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-cookies/angular-cookies.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/base/modules/application/application.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/FooterController.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/HeaderController.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/IndexController.js"></script>
<script type="text/javascript" src="/base/modules/application/init.js"></script>
<script type="text/javascript" src="/base/modules/application/routes/ApplicationRoutes.js"></script>
<script type="text/javascript" src="/base/modules/application/services/Global.js"></script>
<script type="text/javascript" src="/base/modules/application/services/HTTPInterceptor.js"></script>
<script type="text/javascript" src="/base/modules/application/tests/spec/controllers/IndexController.js"></script>
<script type="text/javascript" src="/base/modules/users/controllers/UserController.js"></script>
<script type="text/javascript" src="/base/modules/users/routes/Auth.js"></script>
<script type="text/javascript" src="/base/modules/users/services/UserService.js"></script>
<script type="text/javascript" src="/base/modules/users/tests/spec/controllers/UserController.js"></script>
<script type="text/javascript" src="/base/modules/users/users.js"></script>
<script type="text/javascript">
window.__karma__.loaded();
</script>
Try doing this instead:
files:_.flatten(_.values(assets.core.js)).concat([
'modules/**/*.js'
]);
Notice the use of two *. Read the File Pattern example in the karma configuration documentation.
Wherein the examples are:
**/*.js: All files with a "js" extension in all subdirectories
**/!(jquery).js: Same as previous, but excludes "jquery.js"
**/(foo|bar).js: In all subdirectories, all "foo.js" or "bar.js" files
So, I'm working on an Angular application and I have been having problems regarding compatibility between ngSanitize and ngDragDrop. ngDragDrop can be found at http://ganarajpr.github.io/angular-dragdrop/ and ngSanitize at https://docs.angularjs.org/api/ngSanitize/service/$sanitize.
The very moment I include ngSanitize on my app module, the angular code stops working entirely.
I have a test file called compatibility.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset='utf-8'>
<script src="compatibility.js"></script>
<script src="angular/angular.min.js"></script>
<script src="angular-resource/angular-resource.min.js"></script>
<script src="angular/angular-sanitize.min.js"></script>
<script src="angular/draganddrop.js"></script>
</head>
<body>
{{3+1}}
</body>
</html>
And another called compatibility.js
var app = angular.module("MyApp", ["ngDragDrop","ngSanitize"]);
app.controller("Controller", [ '$scope', '$sce', function($scope, $sce) {
}]);
I haven't the foggiest idea why it isn't working and I'm not sure what to do. Supposedly, evaluating {{3+1}} should return a 4 when the code is run, but it doesn't. I've worked with both ngSanitize and ngDragDrop separately, and the problem only shows when I try to use both simultaneously.
Try moving your compatibility.js file down to be under the angular.min.js.
Or just put it at the bottom like this:
<script src="angular/angular.min.js"></script>
<script src="angular-resource/angular-resource.min.js"></script>
<script src="angular/angular-sanitize.min.js"></script>
<script src="angular/draganddrop.js"></script>
<script src="compatibility.js"></script>
PS. I don't think there is any compatibility problems.