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>
Related
I am beginning with react at the moment coming from pure front end development with HTML, CSS and a bit of jquery. So I got no experience with package installation. I wanted to install axios using npm.
I started with npm install axios and it seemed to work. But I still get the error message "axios is not defined". What I missing? Do I have to right a dependency in my package.json? And if yes how do I right it?
Package.json
{
"name": "first-webapp-react",
"version": "1.0.0",
"description": "",
"main": "main.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "watchify -v -d -t [ reactify --es6 ] main.js -o compiled.js",
"build": "NODE_ENV=production browserify -t [ reactify --es6 ] main.js | uglifyjs > compiled.js"
},
"author": "BAGGID",
"license": "MIT",
"dependencies": {
"moment": "^2.10.2",
"react": "^0.13.2",
"axios": "^0.15.3"
},
"devDependencies": {
"browserify": "^9.0.8",
"reactify": "^1.1.0",
"uglify-js": "^2.4.20",
"watchify": "^3.1.2"
}
}
var React = require('react');
var TopBar = require('./Top-bar');
var ProductPage = require('./Product-page');
var Test = require('./test');
var App = React.createClass({
getInitialState: function() {
return {
page: 'SearchResult',
jobs: []
};
},
componentDidMount: function() {
var _this = this;
this.serverRequest =
axios.get("http://codepen.io/jobs.json")
.then(function(result) {
_this.setState({
jobs: result.data.jobs
});
})
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render(){
console.log('Person: ' + this.state.person);
return (
<div>
<TopBar />
<ProductPage />
<Test />
</div>
);
}
});
module.exports = App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Test</title>
<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
<link href="assets/css/baggid-standart.css" type="text/css" rel="stylesheet" />
<link href="assets/css/login.css" type="text/css" rel="stylesheet" />
<link href="assets/css/button-stacking.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="main">
</div>
<script src="./compiled.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
You should try to import it before use it.
import 'axios' from 'axios';
Also like this.
const axios = require('axios');
Just install via CDN insert this code in your html file
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Just insert this code to your html file and it will work.
so here is how your html file will be
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title>React Test</title>
<link href="maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/" type="text/css" rel="stylesheet" />
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body> <div id="main"> your content here </div>
<script src="compiled.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
Check this simple example, how to use axios:
var App = React.createClass({
getInitialState: function() {
return {
page: 'SearchResult',
jobs: []
};
},
componentDidMount: function() {
var _this = this;
this.serverRequest =
axios.get("http://codepen.io/jobs.json")
.then(function(result) {
console.log('success');
_this.setState({
jobs: result.data.jobs
});
})
.catch(e => console.log('error', e))
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function(){
console.log('Person: ');
return (
<div>
Hello
</div>
);
}
});
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id='app'/>
Try to globally install axios, using
$ npm install -g axios
hi friends i am new to this mean stack application. I want to insert a
logo in my application i used the fallowing code in index.html file
<html ng-app="myapp">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.2.21" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
<!-- <script src="https://d3js.org/d3.v4.min.js"></script>
<script src="smart-table.debug.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script><!-- ui router cdn -->
<script src="controller.js"></script>
<script src="config.js"></script>
</head>
<body ng-controller="finance" class="container">
<div id="banner">
<div id="page-header">
<div class="container">
<img id="logo-main" src="../images/saf-logo.png" width="500" height="75" alt="Logo Thing main logo" class="image-responsive">
</div>
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="add-client">Register Form</a></li>
<li><a ui-sref="client-view">Clients View</a></li>
<!-- <li><a ui-sref="chart">Chart</a></li> -->
</ul>
</div>
</nav>
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view> </div>
</div>
</body>
</html>
But it shows the fallowing error in console when i run the
application. GET http://localhost:8000/images/saf-logo.png 404 (Not
Found)
I using the angularjs expressjs mongodb and node.js
controler.js
var app = angular.module('myapp', ['ui.router']);
console.log("controller out side");
app.controller('finance',['$scope',function($scope){
// console.log("inside controller");
}])
express code.
var express=require('express');
var app=express();
var bodyParser=require('body-parser');
app.use(bodyParser.json());
app.use(express.static('public'));
app.use(bodyParser.urlencoded({extended: true}))
console.log("welcome to finance app");
app.listen(8000);
package.json file
{
"name": "finance",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"angular": "^1.5.10",
"angular-animate": "^1.5.10",
"angular-aria": "^1.5.10",
"body-parser": "^1.15.2",
"http-server": "^0.9.0",
"mongoose": "^4.7.5",
"angular-material": "^1.1.1",
"nodemon": "^1.11.0",
"express": "^4.14.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"index":"nodemon src/index.js"
},
"author": "",
"license": "ISC"
}
I looked at at the official upgrade guide, some blogs like this but I don't get it.
I wanted to take a look at the upgrade module of angular2, but failed right at the beginning when I tried to bootstrap my ng1 application with the angular upgrade adapter to start.
I get those errors
My index.html
<html>
<head>
(...)
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
</head>
<body>
<div ng-controller="AppController">
(...)
</div>
<script src="app/app.module.js"></script>
<script src="app/app.controller.js"></script>
<script>
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</body>
</html>
main.ts (from the official upgrade guide)
import {UpgradeAdapter} from 'angular2/upgrade';
const upgradeAdapter = new UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['app'], {strictDi: true});
it's fine to bootstrap like this
angular.bootstrap(document.body, ['app'], {strictDi: true});
if I only miss some sort of polyfill here is my package.json:
{
(...)
"dependencies": {
"angular": "^1.4.9",
"angular2": "^2.0.0-beta.14",
"es6-shim": "^0.35.0",
"jquery": "^2.2.3",
"reflect-metadata": "^0.1.2",
"rxjs": "^5.0.0-beta.2",
"systemjs": "^0.19.26",
"zone.js": "^0.6.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.9",
"typings": "^0.7.12"
}
}
I'm using the tsconfig.json and typings.json from the official 5min quickstart.
Everywhere I read it seems that this is a trivial task, but although I tried different approches none worked for me. So what am I missing?
EDIT:
The solution is as Thierry stated below to import
<script src="node_modules/angular2/bundles/upgrade.dev.js"></script
You can find more details in his answer here which focuses on the same problem (I've actually read it bevore but missed the comment with the important part for me).
You also need to include the upgrade js file:
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/upgrade.dev.js"></script>
See this plunkr for more details:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
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?