I have added bower dependency of my angular project but those dependency are updating in bower.json file but not in index.html. because of that i'm getting Uncaught ReferenceError: angular is not defined error after gulp serve.
I tried bower install/ bower install --save-dev.
bower.json
{
"name": "test",
"version": "0.0.0",
"dependencies": {
"angular": "^1.4.0",
"angular-animate": "^1.4.0",
"angular-cookies": "^1.4.0",
"angular-resource": "^1.4.0",
"angular-route": "^1.4.0",
"angular-sanitize": "^1.4.0",
"angular-touch": "^1.4.0"
},
"devDependencies": {
"angular-mocks": "^1.4.0",
"jquery": "^3.2.1"
},
"appPath": "app",
"moduleName": "testApp"
}
index.html
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
use your files on priority wise, because in .js, priority is always matter,
Related
I am trying to use the layouts properties from AngularJs Material. For example layout, layout-margin, flex but for some reason it is not applying to the css.
I can use md-raised-button, md-toolbar, md-autocomplete, md-form-field. So looks like my configuration is correct.
Inside the app.module.ts i have:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MaterialModule, MdDatepickerModule, MdNativeDateModule } from '#angular/material';
import 'hammerjs';
My package.json has:
{
"name": "my-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.3.6",
"#angular/cdk": "^2.0.0-beta.10",
"#angular/common": "^4.3.5",
"#angular/compiler": "^4.3.5",
"#angular/core": "^4.3.5",
"#angular/forms": "^4.3.5",
"#angular/http": "^4.3.5",
"#angular/material": "^2.0.0-beta.10",
"#angular/platform-browser": "^4.3.5",
"#angular/platform-browser-dynamic": "^4.3.5",
"#angular/platform-server": "^4.3.5",
"#angular/router": "^4.3.5",
"angular-in-memory-web-api": "0.3.2",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.4.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "^1.5.0",
"#angular/compiler-cli": "^4.3.5",
"#angular/language-service": "^4.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.5.3",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "^2.3.4",
"webpack": "^3.8.1"
}
}
My index.html:
<!doctype html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" >
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<my-app></my-app>
</body>
</html>
Am i missing an import? I couldn't figure it out from the documentation.
Please let me know if you need more information.
Thanks
Angular Material - https://material.angular.io - uses not the same layout properties as AngularJS Material - https://material.angularjs.org - did. So you cannot use layout, layout-margin, flex, etc directly.
I guess it caused a lot of confusion in its time. I strongly advice you to rename the question and add the appropriate tags to avoid misunderstanding (as well as self-answer it, if you could). I'm sure you had already figured the difference out, but for the sake of encyclopaedic reasons (as soon as SO is a kind of encyclopaedia for developers now) it would be very cool to make this article useful for others in future.
Im getting the errors:
Error: transition superseded
at $StateProvider.$get (http://localhost:1337/angular-ui-router/release/angular-ui-router.js:2903:42)
Error: transition prevented
Error: transition aborted
Error: transition failed
I found a similar post where he suggested solution is to update angular-ui-router to 0.3.1 however when I update it, it is being updated only to version 0.2.18, i checked the documentation which speaks about 0.2.18 as well so Im a little confused. I couldnt find anything else online and hope someone has an idea as I have no clue why Im getting those errors.
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/" />
<title>An app</title>
<link rel="stylesheet" type="text/css" href="/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/style.css" />
<link rel="stylesheet" href="/materialize-css/bin/materialize.css">
<script src="/lodash/index.js"></script>
<script type="text/javascript" src="/jquery/dist/jquery.min.js"></script>
<script src="/angular/angular.js"></script>
<script src="/angular-animate/angular-animate.js"></script>
<script src="/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/angular-ui-router-styles/ui-router-styles.js"></script>
<script type="text/javascript" src="/materialize-css/bin/materialize.js"></script>
<script src="/angular-ui-bootstrap/ui-bootstrap.js"></script>
<script src="/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/socket.io-client/socket.io.js"></script>
<script src="/main.js"></script>
</head>
<body ng-app="myApp">
<navbar></navbar>
<div id="main" ui-view></div>
</body>
</html>
app.js
window.app = angular.module('myapp', ['ui.router', 'ui.bootstrap', 'ngAnimate']);
app.config(function ($urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
});
part of package.json
},
"engines": {
"node": ">=4.0.0"
},
"dependencies": {
"angular": "^1.6.2",
"angular-animate": "^1.6.2",
"angular-mocks": "^1.4.0",
"angular-ui-bootstrap": "^0.14.3",
"angular-ui-router": "^0.2.18",
"babel-preset-es2015": "^6.6.0",
"babel-register": "^6.6.0",
"bluebird": "^3.4.7",
"body-parser": "^1.12.0",
"bootstrap": "^3.3.7",
"chalk": "^1.0.0",
"connect-session-sequelize": "^3.0.0",
"cookie-parser": "^1.3.4",
"express": "^4.12.0",
"express-session": "^1.10.3",
"gulp": "^3.8.11",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.5.2",
"gulp-eslint": "^0.14.0",
"gulp-istanbul": "^0.9.0",
"gulp-livereload": "^3.7.0",
"gulp-minify-css": "^0.4.6",
"gulp-mocha": "^2.0.0",
"gulp-ng-annotate": "^0.5.2",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^0.6.6",
"gulp-rename": "^1.2.0",
"gulp-sass": "^2.0.4",
"gulp-sourcemaps": "^1.3.0",
"gulp-uglify": "^1.1.0",
"jquery": "^3.1.1",
"lodash": "^3.9.3",
"materialize-css": "^0.98.0",
"nodemon": "^1.3.7",
"passport": "^0.2.1",
"passport-local": "^1.0.0",
"pg": "^4.5.5",
"pg-hstore": "^2.3.2",
"run-sequence": "^1.0.2",
"sequelize": "^3.23.3",
"socket.io": "^1.3.4",
"socket.io-client": "^1.3.5",
}
}
Why using an old version of ui-router when the new one is out there. Have you tried with :
"angular-ui-router": "1.0.0-rc.1",
After if that doesn't work, we need more information on your problem, maybe a plunker that shows the problem, with just the code you provided, it's hard to tell you what's wrong.
Also on a side note that has nothing to do with your questions, I advise you to separate your dependencies between dependencies and devDependencies. See here for more details
Remove "angular-ui-router": "^0.2.18", from package.json
just run command
npm install --save angular-ui-router
I'm building an application with AngularJs and Yeoman and when I do "$ grunt serve" my website runs with no problems but when i do "$ grunt build" i get the following error
It Seems that even an empty Yeoman project goes belly up when changing bootstrap v3 to v4!
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyWebApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to:
Error: [$injector:nomod] Module 'ngAnimate' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
bower.json
{
"name": "mywebapp",
"version": "0.0.0",
"dependencies": {
"angular": "^1.4.0",
"bootstrap": "v4.0.0-alpha.2",
"angular-animate": "^1.4.0",
"angular-cookies": "^1.4.0",
"angular-resource": "^1.4.0",
"angular-route": "^1.4.0",
"angular-sanitize": "^1.4.0",
"angular-touch": "^1.4.0",
"angular-google-maps": "^2.3.2"
},
"devDependencies": {
"angular-mocks": "^1.4.0"
},
"appPath": "app",
"moduleName": "MyWebApp",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
}
this is the top of my app.js:
angular.module('MyWebApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'uiGmapgoogle-maps',
'MyWebApp.config'
])...
This is the scripts section of the index.html
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script src="scripts/config.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/navbar.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
Hope someone can help
I am not sure I am doing it the right way. I have defined modules the following:
require('angular');
require('angular-ui-router');
var $ = require('jquery');
require('bootstrap');
I have my package.json file like this:
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build": "browserify main.js -o bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browserify": "^12.0.1"
},
"dependencies": {
"angular": "^1.4.8",
"angular-ui-router": "^0.2.15",
"bootstrap": "^3.3.6",
"bootstrap-social": "^4.11.0",
"font-awesome": "^4.5.0",
"jquery": "^2.1.4"
}
}
And my html page:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="wrap">
<!--header-->
<div ui-view="header"></div>
<!--main content-->
<div ui-view="content"></div>
</div>
<!--push the footer down-->
<div id="push"></div>
<!--footer-->
<div ui-view="footer"></div>
<script src="bundle.js"></script>
<script src="commonViews/commonView.js"></script> //angular module defined
</body>
</html>
When I run the html page, I get an error in console saying "angular is not defined"
What I am doing wrong? I have run the command browserify maing.js -o bundle.js which minified all the code into bundle.js file and yet still the same error. Apart from that I am not able to bundle bootstrap and font-awesome css files. Is it true that broswerify doesn't support css files?
This is my first time playing with Angular.js. I have an index page:
<html ng-app="toDoListApp">
<head>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
{{ 1+2 }} #<-- this part is breaking
<div class="main" ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
I'm trying to get my routes to work with it. Here's my routes.js:
var toDoListApp = angular.module('toDoListApp', []);
/////////////////////////////
//when I remove this bottom part, the index.html page works.
toDoListApp.config(function($routeProvider) {
$routeProvider.when(
'/',
{
templateUrl: 'partials/chores.html',
controller: 'ChoresController'
});
});
///////////////////////////////
Not too sure what I'm doing wrong... Am I missing a dependency? Here's my package.json file that I copied from the angular website tutorial:
{
"version": "0.0.0",
"private": true,
"name": "toDoListApp",
"description": "fooling around with angular",
"devDependencies": {
"karma": "~0.10",
"protractor": "~0.20.1",
"http-server": "^0.6.1",
"bower": "^1.3.1",
"shelljs": "^0.2.6"
},
"scripts": {
"postinstall": "bower install",
"start": "http-server -p 8000",
"test": "karma start test/karma.conf.js",
"update-webdriver": "webdriver-manager update",
"protractor": "protractor test/protractor-conf.js",
"test-single-run": "karma start test/karma.conf.js --single-run",
"update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/##NG_LOADER_START##[\\s\\S]*\\/\\/##NG_LOADER_END##/, '//##NG_LOADER_START##\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//##NG_LOADER_END##', 'app/index-async.html');\""
}
}
and my bower.json also from angular's tutorial:
{
"name": "toDoListApp",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "1.2.x",
"angular-mocks": "~1.2.15",
"bootstrap": "~3.1.1",
"angular-route": "~1.2.15",
"angular-resource": "~1.2.15",
"jquery": "1.10.2",
"angular-animate": "~1.2.15"
}
}
Let me know if you need any more files.
=== UPDATE ===
The log seems to have changed after I added ngRoutes, but my controller is having issues:
INDEX.HTML
<html ng-app="toDoListApp">
<head>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
{{ 1+2 }} #<-- still breaks
<div class="main" ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
Routes:
var toDoListApp = angular.module('toDoListApp', ['ngRoute']);
toDoListApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when(
'/',
{
templateUrl: 'partials/chores.html',
controller: 'ChoresController'
});
})];
But in the log it now says it's a syntax error in my controller:
toDoListApp.controller("ChoresController", function($scope) {
$scope.chores = ["laundry", "dishes"];
});
ngRoute in AngularJS is not included with the library.
You can download it via Google's CDN
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js
Load it just after AngularJS.
You also need to specify it as a dependency for your app's module.
var toDoListApp = angular.module('toDoListApp', ['ngRoute']);
When configuring your routes. You have to inject the $routeProvider
toDoListApp.config(['$routePrivder',function($routeProvider) {
$routeProvider.when(
'/',
{
templateUrl: 'partials/chores.html',
controller: 'ChoresController'
});
}]);
Route controllers are used to handle special logic when changing routes. Don't confuse a route controller with a controller you would use with a directive.
I haven't always had success using controller within my routes. So instead, I've opted for just setting the controller in the view itself.
<div ng-controller="ChoresController">
</div>