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"
}
Related
This is my package.json file in the src folder
{
"homepage": "http:Khairiya.github.io/HW6_IS96G58JX7",
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.1.0"
}
}
This is my app.js file in my src folder as well. the style file is located in the src folder and works perfectly with the bootstrap
import React from "react";
import logo from './logo.png';
import { Component} from "react";
import "./style.css"
class App extends Component {
constructor(props) {
super(props);
this.state = {
allData: {},
data:[],
isLoaded: false,
};
}
componentDidMount() {
fetch("https://disease.sh/v3/covid-19/all")
.then((response) => response.json())
.then(
(allData) => {
this.setState({
isLoaded: true,
allData: allData,
});
},
(error) => {
// handle your errors here
this.setState({
isLoaded: true,
error,
});
}
);
fetch(
"https://disease.sh/v3/covid-19/countries?sort=cases&allowNull=true"
)
.then((res) => res.json())
.then((data) => {
this.setState({
isLoaded: true,
data: data,
});
});
}
render() {
const { allData } = this.state;
const{ data } = this.state;
let update = data.map((item) => {
const { country, cases, deaths, recovered, active, } = item;
return (
<tbody key={country}>
<tr>
<td>{country}</td>
<td>{cases}</td>
<td>{active}</td>
<td>{recovered}</td>
<td>{deaths}</td>
</tr>
</tbody>
);
});
return (
<div className="App">
<div className="container">
<div className="row">
<p className="toprow">
<img src={logo} alt="logo" height="30px" />
Covid-19 Tracker
</p>
</div>
</div>
<div> </div>
<div> </div>
<div> </div>
<div className="container">
<div className="row justify-content-between">
<div className="col-sm-2 box">
<p>
Total Cases <i className="fa fa-arrow-alt-circle-up icons"></i>
</p>
<p className="counterPara">
<b>{allData.cases}</b>
</p>
</div>
<div className="col-sm-2 bo`enter code here`x">
<p>
Recovered{" "}
<i className="fa fa-arrow-alt-circle-down icons-green"></i>
</p>
<p className="counterPara">
<b>{allData.recovered}</b>
</p>
</div>
<div className="col-sm-2 box">
<p>
Active Cases <i className="fa fa-arrow-alt-circle-up icons"></i>
</p>
<p className="counterPara">
<b>{allData.active}</b>
</p>
</div>
<div className="col-sm-2 box">
<p>
Total Deaths <i className="fa fa-arrow-alt-circle-up icons"></i>
</p>
<p className="counterPara">
<b>{allData.deaths}</b>
</p>
</div>
</div>
</div>
<div> </div>
<div> </div>
<div> </div>
<div className="container">
<div className="row">
<div className="col-sm-8">
<table className="table table-striped">
<head>
<tr>
<th>Countries</th>
<th>Total Cases</th>
<th>Recovered</th>
<th>Active Cases</th>
<th>Deaths</th>
</tr>
</thead>
{update}
</table>
</div>
<div className="col-sm-4">
<div className="col align-self-end side-box">
<div className="row justify-content-center innerBoxPadding">
<div className="col-sm-5 inner-box">
<b>Health Tips</b>
</div>
</div>
</div>
<div> </div>
<div className="col align-self-end side-box">
<div className="row justify-content-center innerBoxPadding">
<div className="col-sm-6 inner-box">
<b>News & Update</b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
This is my index.html file located in my public folder. this is where the bootstrap files were linked.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-
manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"
integrity="sha512-
YSdqvJoZr83hj76AIVdOcvLWYMWzy6sJyIMic2aQz5kh2bPTd9dzY3NtdeEAzPp/PhgZqr4aJObB3ym/vsItMg=="
crossorigin="anonymous"></script>
</body>
</html>
So this is what I posted on heroku. it successfully pushed to gisthub. the code has no errors or warnings in console. please help
okay the problem was that, in pushing the app to github, I went through the right steps, thus, installing GitHub Pages package as a dev-dependency and adding the required properties to package.json file. These steps were not needed in deploying the hub to heroku. So, for the second app I created, I pushed the code to github without installing the dependencies and adding the required properties. After I pushed the app to heroku and it worked. The final website is at https://hw6-is96g58jx7.herokuapp.com/
I am trying an application with AngularJS 1.0 but I am facing issues with routing. The route is not working at all. I can't see my templates being displayed inside ng-view. My code is as shown below.
package.json
"main": "server.js",
"dependencies": {
"angular": "^1.4.3",
"angular-route": "1.6.10",
"body-parser": "latest",
"ejs": "latest",
"express": "latest",
"fabric-ca-client": "^1.0.2",
"fabric-client": "^1.0.2",
"grpc": "1.11.0"
}
app.js
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/vault', {
templateUrl: 'client/vault.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
.when('/til', {
templateUrl: 'client/til.html'
})
.when('/order', {
templateUrl: 'client/order.html'
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Application</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="application" ng-controller="appController">
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</html>
There are two more pages for store and about with only one tag in them.
I should be able to see the changes in the view part i.e. 'This is About page' but it is not being displayed.
I am referring to this URL
Any help would be appriciated.
Update-1
Added angular-route package but still not working.
Getting following error:
" Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=application&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1"
Update-2
Entire console output, which shows some error but don't understand a bit of it. It has several warnings as well.
https://pastebin.com/j06ku3yG
Update-3
I didn't added the minified js files for angular-route in to my html and that was the reason I was getting issues. Further more the existing angular script in html page also had version mismatch.
I also corrected some issues with routes after this I faced recursion related issues (could see multiple pages within the same page) Had to make changes to routs.
Thank you all for helping :)
I have modified your code a bit to give you a basic working demo of your app. The routing required an angular-route.js script for 1.2+ AngularJS versions. For both scripts their versions must match. I decided to use 1.6.5. I also replaced bootstrap and jquery with ui.bootstrap - angularjs version.
Here is a working demo:
/* Use `ui.bootstrap` module instead of jQuery + Bootstrap */
var app = angular.module('application', ["ngRoute", "ui.bootstrap"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/about', {
templateUrl: 'client/about.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
});
app.controller('appController', function($scope, $location) {
$scope.isActive = function(path) {
return path === $location.path();
}
});
<!DOCTYPE html>
<html>
<!-- Matching angular.js and angular-route.js versions -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div ng-app="application" ng-controller="appController">
<header ng-init="isNavCollapsed=true">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav navbar-left">
<li ng-class="{ active: isActive('/')}">Home</li>
<li ng-class="{ active: isActive('/store')}">Store</li>
<li ng-class="{ active: isActive('/about')}">About</li>
</ul>
</div>
</div>
</nav>
</header>
<div ng-view></div>
<!-- Separate files -->
<script type="text/ng-template" id="client/index.html">
index
</script>
<script type="text/ng-template" id="client/about.html">
about
</script>
<script type="text/ng-template" id="client/store.html">
store
</script>
</div>
</body>
</html>
First, you still needs to link the NgRoute from the angular-route.js.
Secondly, to link templates use href="#!store" instead of href="#store"
Here's a working example using angularjs 1.6.9
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/store', {
templateUrl: 'store.html'
})
.when('/about', {
templateUrl: 'about.html'
})
});
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<div ng-app="application" >
<script type="text/ng-template" id="home.html">
<div class="view">
<h2>home</h2>
</div>
</script>
<script type="text/ng-template" id="store.html">
<div class="view">
<h2>store</h2>
</div>
</script>
<script type="text/ng-template" id="about.html">
<div class="view">
<h2>about</h2>
</div>
</script>
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</div>
I've been trying to make a small website that has a main page where a part is changed using templates. I've made an HTML file that contains a small menu for choosing what to show and two templates. If i use the google CDN it works without any problems but i would like to use a local version of angular but that breaks my site and the routing doens't work. The HTML and JS file can be seen below.
Can anyone see what i'm missing?
HTML file:
<!DOCTYPE html>
<html ng-app="myApp" ng-csp="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test app</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-callout.css">
<link rel="stylesheet" href="css/bootstrap-datepicker3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <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="angular/angular-1.6.1/angular.js"></script>
<script src="angular/angular-1.6.1/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body class="backgroundColor">
<div class="divHeader">
<div class="center-header">
<div class="container" style="">
<a ng-href="#/">
</a>
</div>
</div>
</div>
<div>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Page 1</li>
<li><a ng-href="#/">Home</a></li>
<li class="icon">
☰
</li>
</ul>
</div>
<div class="edge edge-shadow"></div>
<script type="text/ng-template" id="main.html">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Home</div>
<div class="panel-body">Home Page!</div>
</div>
</div>
</script>
<script type="text/ng-template" id="Page1.html">
<div>
<p>Hello</p>
<iframe class="browserframe" id='myiframe' src="http://www.google.com" scrolling="auto" frameborder="0">
</iframe>
</div>
</script>
<div ng-view>
</div>
</body>
<footer>
</footer>
</html>
app.js file:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider,$compileProvider) {
$compileProvider.aHrefSanitizationWhitelist (/^\s*(https?|ftp|mailto|file|tel|chrome-extension):/);
$routeProvider
.when("/", {
templateUrl : 'main.html',
controller : "MainController"
})
.when("/Page1", {
templateUrl: 'Page1.html',
controller: 'Page1Controller'
})
.otherwise( {
templateUrl : 'main.html',
controller : "MainController"
})
});
app.controller('MainController', function ($scope){
});
app.controller('Page1Controller', function ($scope){
});
function resizeMenu() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
To add local angularjs files, you can use bower. You can install it globally with npm through the following command : npm install -g bower.
Then you can create a bower.json file :
{
"name": "app-name",
"authors": [],
"description": "app description",
"main": "",
"license": "MIT",
"homepage": "",
"version": "1.0.0",
"dependencies": {
"angular": "^1.4.8",
"angular-route": "^1.4.8"
}
}
You just have to run bower install : it will create a repository bower_components with the angularjs local files.
Finally, you change the path in your index.html to match the location. If the bower.json file is next to the index.html, the paths would be :
bower_components/angular/angular.min.js
bower_components/angular-route/angular-route.min.js
I used a different version of angular than the google CDN. Once i changed my downloaded angular to 1.4.8 it worked.
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>