I want to distribute my app in two similar variants. Only the start screen of both variants is different.
What's the right pattern for this setup? I think using a index_a.html and index_b.html is a good start?!
My index.html looks like this
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>myApp</title>
<link rel="stylesheet" href="styles/application.css"/>
</head>
<body ng-controller="AppController">
<div ng-view></div>
<script src="lib/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/filters.js"></script>
<script src="scripts/directives.js"></script>
</body>
</html>
Thanks
Related
I just finished an angular app and would like to deploy it to a web server. I'm actually looking for a free solution for now. I'm using
http-server to launch my app so I don't have any other setup such as grunt or yeoman. I thought I could upload the files to my apache server but it shows blank.
This is how my file directory look. index.html
<!doctype html>
<html lang="en" ng-app="musicSearch">
<head>
<meta charset="utf-8">
<title>Angular App</title>
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.2/angular-resource.min.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet/less" type="text/css" href="assets/styles/style.less">
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
<!-- Styles -->
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
<script src="app.js"></script>
<script src="routes.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="directives.js"></script>
I have been trying to do some proof of concept and I was expecting Plunker to write 4 for the expression {{40/10}} but it never did. What's wrong with it? However I see Scott Allen was able to do so.
Here is my plunker link: https://plnkr.co/edit/OTuxWEMmlWObMgGy9o2Z?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{40/10}}
</body>
</html>
This is because the script you import is Angular 2. If you import Angular 1.x.x, your example will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 40/10 }}
</body>
</html>
If you want to learn how to use Angular 2, look at their website.
You are linking to angular2 while using an angular1 directive ng-app.
Here is a link to a working plnkr link
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 40/10 }}
</body>
</html>
Angular 2 is a complete redesign from angular1, so a code working in Angular 1 will not work in Angular 2.
I have created a jewelry catalog in Angular.js There are 2500 items in the JSON file. and the items are also linked to an image directory. The list is only populating in Firefox. It will not populate in Chrome, Microsoft edge and Microsoft internet explorer. I need to resolve this issue
HTML page :
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="lib/angular/angular-animate.min.js"></script>
<script src="js/app.js"></script> <script src="js/controllers.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bg">
<div class="main" ng-view></div>
</div>
</body>
</html>
I'm trying to go through a simple tutorial on AngularJS and can't seem to get past the first step. {{ 10 x 10}} isn't appearing as 100. Any ideas?
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 10*10}}
</body>
</html>
You might have mentioned multiple versions of ng-app (probably in <html> tag).Otherwise your code is working fine
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 10*10}}
</body>
</html>
Here's the demo
I am wondering if there is a better way to import all my angular scripts. Currently, if I add a new controller or component I need to go into my index.html and import it at the bottom. This is fine but is a tedious task and I can imagine after the application grows, this may get messy. Is there a best practice to automate this?
My index page looks like this: (All criticism is welcome)
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<title>Test Page</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/main.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<popcorn-header></popcorn-header>
<!-- .container -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div ui-view></div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Vendor -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="lib/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script>
<!-- Bootstrapping -->
<script type="text/javascript" src="app.js"></script>
<!-- Routes -->
<script type="text/javascript" src="routes.js"></script>
<!-- Core -->
<script type="text/javascript"src="components/api/api.js"></script>
<script type="text/javascript"src="constants.js"></script>
<script type="text/javascript"src="components/api/ApiFactory.js"></script>
<script type="text/javascript"src="components/header/HeaderDirective.js"></script>
<script type="text/javascript"src="components/feed/feed.js"></script>
<script type="text/javascript"src="components/feed/FeedController.js"></script>
<script type="text/javascript" src="components/feed/FeedDirective.js"></script>
</body>
</html>
If your application is smaller and has only 10-20 script and css files then writing simple grunt task for generating html will be simple and good. But if you have hundreds of script and styles then you should use one of the following module loader library. these libraries will make your life really easy in managing modules based application.
And Angular's module system works really great with all of these.
RequireJs
http://requirejs.org/
Browserify
http://browserify.org/
Webpack
http://webpack.github.io/