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?
Related
my index.js file
When i run a parcel/ react project i keep getting the error below
#parcel/transformer-js: Unexpected token ). Expected this, import, async, function, [ for array
literal, { for object literal, # for decorator, function, class, null, true, false, number,
bigint, string, regexp, ` for template literal, (, or an identifier
import { createRoot } from 'react-dom/client';
import App from './App/App';
const container = document.getElementById('root');
const root = createRoot(container);
// createRoot(container!) if you use TypeScript
root.render(<App/>);
//index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<link href="./index.css" rel="stylesheet">
<title>
My App
</title>
</head>
<body>
<div id="root">
</div>
<script type="module" src="./index.js">
</script>
</body>
</html>
/// my app.js file is below
export default function App() {
return (
<div className=''>
<h2 className='text-green-700 '>
Analytics
</h2>
</div>
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
my package.json file
{
"devDependencies": {
"parcel": "2.4",
"postcss": "^8.4.14",
"tailwindcss": "^3.0.24"
},
"dependencies": {
"react-google-charts": "^4.0.0"
},
"name": "analytics",
"version": "1.0.0",
"description": "Analytic app",
"source": "src/index.html",
"main": "index.js",
"scripts": {
"start": "parcel",
"build": "parcel build"
},
"author": "Caldewood Alikula",
"license": "ISC"
}
Avoid include react and react-dom via CDN.
Install them as npm packages:
npm i react#16.6.3
npm i react-dom#16.6.3
Restart the server
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,
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'm new to react and created a small app. Everything works fine on desktop, but the react part of the app doesn't show up on mobile. Can sby tell me what I should do?
http://dry-wildwood-76655.herokuapp.com/
package.json
{
"name": "udacitytransportationapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"prod": "NODE_ENV=production node server.js",
"postinstall": "webpack -p"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-1": "^6.5.0",
"express": "^4.14.0",
"html-webpack-plugin": "^2.22.0",
"jquery": "^3.1.0",
"lodash": "^4.13.1",
"moment": "^2.14.1",
"offline-plugin": "^3.4.2",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-router": "^2.6.0",
"webpack": "^1.13.1"
},
"devDependencies": {
"mocha": "^2.5.3",
"webpack-dev-server": "^1.14.1"
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Transportation App</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">TransportationApp</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
With this app you can search through the BART station schedules
</li>
</ul>
</div>
</nav>
</div>
<div class="container"></div>
</body>
<script src="/bundle.js"></script>
</html>
style/style.css
.bart-image {
width: 300px;
height: 300px;
}
.table-row {
padding-top:30px;
}
Your problem is with using fetch. If you look at the documentation https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API you can see it is not supported in all browsers. This is why it is showing up in desktop chrome but not safari and why it doesn't work on mobile.
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>